Using Proper CSS Media Queries in Angular

Using proper CSS media queries in Angular

You can use angular/breakpoints-angular-cdk

follow these steps

on the terminal

npm install @angular/cdk

Then import the layout module and and add it to your NgModule’s list of imports

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LayoutModule } from '@angular/cdk/layout';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
  AppComponent
],
imports: [
    BrowserModule,
    LayoutModule
],
providers: [],
bootstrap: [AppComponent]
})

right after you can use it in your component, just import these classes from @angular/cdk/layout

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';

@Component({ ... })
export class AppComponent implements OnInit {
  public showContainer: boolean;
  constructor(public breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver
      .observe(['(min-width: 400px)'])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          this.showContainer = true;
        } else {
          this.showContainer = false;
        }
      });
  }
}

Check the docs it is a simple API

How to use media queries in angular component's styles.scss?

Use following syntax. This is the correct syntax for media query.
Hope this helps!!

@media only screen and (max-width: 768px) { 
    /* Here are some changes*/
}

Media queries & Angular Material

yes and no.

There is no need to create your own media queries.

To have a responsive app means, that the main layout will take care of the window sizes. Main layout means that you think in columns and rows.

To controll this responsive behaviour, you can use angular/flex.

First: you have to install this by

npm install @angular/flex-layout -s

You will find a documentation and a lot of demos here: angular/flex-layout and here: Demos

You can try out this: angular-project-generator. The generated project seed uses angular/flex and the angular mat-sidenav.

If you want to write your own media queries, don't use 200px, 300px or 500px. Try to use same values used here: Responsive API

default angular breakpoints:
  xs: begin: 0, end: 599.9px
  sm: begin: 600px, end: 959.9px
  md: begin: 960px, end: 1279.9px
  lg: begin: 1280px, end: 1919.9px
  xl: begin: 1920px, end: 4999.99px

In some of my angular project, I used this scss, which generates some responsive helper classes:

    @charset "UTF-8";

// see node_modules/@angular/flex-layout/_mq.scss

// Non-overlapping Material Design breakpoints
// @type map
$breakpoints: (
  xs: (
    begin: 0,
    end: 599.9px,
  ),
  sm: (
    begin: 600px,
    end: 959.9px,
  ),
  md: (
    begin: 960px,
    end: 1279.9px,
  ),
  lg: (
    begin: 1280px,
    end: 1919.9px,
  ),
  xl: (
    begin: 1920px,
    end: 4999.99px,
  ),
) !default;

// Overlapping breakpoints that are greater than defined
// Material Design breakpoints
// @type map
$overlapping-gt: (
  gt-xs: 600px,
  gt-sm: 960px,
  gt-md: 1280px,
  gt-lg: 1920px,
) !default;

// Overlapping breakpoints that are less than defined
// Material Design breakpoints
// @type map
$overlapping-lt: (
  lt-sm: 599.9px,
  lt-md: 959.9px,
  lt-lg: 1279.9px,
  lt-xl: 1919.9px,
) !default;

@mixin layout-bp($bp) {
  @if map-has-key($breakpoints, $bp) {
    $min: map-get(map-get($breakpoints, $bp), begin);
    $max: map-get(map-get($breakpoints, $bp), end);
    @media (min-width: $min) and (max-width: $max) {
      @content;
    }
  } @else if map-has-key($overlapping-gt, $bp) {
    $min: map-get($overlapping-gt, $bp);
    @media (min-width: $min) {
      @content;
    }
  } @else if map-has-key($overlapping-lt, $bp) {
    $max: map-get($overlapping-lt, $bp);
    @media (max-width: $max) {
      @content;
    }
  }
}

$allkeys: map_keys(
  map_merge($breakpoints, map_merge($overlapping-gt, $overlapping-lt))
);

@each $key in $allkeys {
  @include layout-bp($key) {
    .ge-display-none-#{$key} {
      display: none !important;
    }
    .ge-display-block-#{$key} {
      display: block !important;
    }
    .ge-display-inline-#{$key} {
      display: inline !important;
    }
    .ge-padding-0-#{$key} {
      padding: 16px !important;
    }
    .ge-padding-16px-#{$key} {
      padding: 0 !important;
    }
    .ge-margin-0-#{$key} {
      margin: 16px !important;
    }
    .ge-margin-16px-#{$key} {
      margin: 0 !important;
    }
  }
}

You can put the scss code in here to see the generatet media queries: sassmeister

Why Media Queries not working in Angular8

Thanks for the help!

There seems to be some error in an npm package that I was using. Removed the package and everything is working fine as expected. The npm package that I was using was ngx-swiper-wrapper.

Angular 6/7 css media queries are not applied on grand-child

Try :host /deep/ instead of :host ::ng-deep as shown below

:host /deep/ {
    /*your style goes here*/
}

Or

Use encapsulation: ViewEncapsulation.Noneinstead ofencapsulation: ViewEncapsulation.Native

How to add media queries in Angular5 using Sass & bootstrap 4.1.3

If you use bootstrap & SASS it's might be like this:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example usage:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

More info in docs: https://getbootstrap.com/docs/4.0/layout/overview/

Using @media queries for different screen-sizes not working properly

You have violated some indentation rules on the bottom block. Make sure to set correct indentation when nesting as you have done in top block.

---

Related Topics