Angular Responsive Design: Complete Guide

01.ts

export declare const Breakpoints: {
    XSmall: string;
    Small: string;
    Medium: string;
    Large: string;
    XLarge: string;
    Handset: string;
    Tablet: string;
    Web: string;
    HandsetPortrait: string;
    TabletPortrait: string;
    WebPortrait: string;
    HandsetLandscape: string;
    TabletLandscape: string;
    WebLandscape: string;
};

02.ts

import {Breakpoints} from '@angular/cdk/layout';

console.log('Web ' + Breakpoints.Web);
console.log('WebLandscape ' + Breakpoints.WebLandscape);
console.log('WebPortrait ' + Breakpoints.WebPortrait);

console.log('Tablet ' + Breakpoints.Tablet);
console.log('TabletPortrait ' + Breakpoints.TabletPortrait);
console.log('TabletLandscape ' + Breakpoints.TabletLandscape);

console.log('Handset ' + Breakpoints.Handset);
console.log('HandsetLandscape ' + Breakpoints.HandsetLandscape);
console.log('HandsetPortrait ' + Breakpoints.HandsetPortrait);

console.log('XSmall ' + Breakpoints.XSmall);
console.log('Small ' + Breakpoints.Small);
console.log('Medium ' + Breakpoints.Medium);
console.log('Large ' + Breakpoints.Large);
console.log('XLarge ' + Breakpoints.XLarge);

03.ts

@Component()
export class ResponsiveComponent implements OnInit {

  constructor(private responsive: BreakpointObserver) {
  
  }
  
  ngOnInit() {
  
    this.responsive.observe(Breakpoints.HandsetLandscape)
      .subscribe(result => {

        if (result.matches) {
          console.log("screens matches HandsetLandscape");
        }

  });
    
  }
  
}

04.ts

this.responsive.observe([
  Breakpoints.TabletPortrait,
  Breakpoints.HandsetLandscape])
  .subscribe(result => {

    const breakpoints = result.breakpoints;

    if (breakpoints[Breakpoints.TabletPortrait]) {
      console.log("screens matches TabletPortrait");
    }
    else if (breakpoints[Breakpoints.HandsetLandscape]) {
      console.log("screens matches HandsetLandscape");
    }

  });

05.ts

@Component()
export class ResponsiveComponent implements OnInit {

  hideSideMenu = false;

  constructor(private responsive: BreakpointObserver) {

  }
  
  ngOnInit() {
  
    this.responsive.observe([
      Breakpoints.HandsetLandscape,      
      Breakpoints.TableLandscape,
      ])
      .subscribe(result => {

        this.hideSideMenu = false; 

        if (result.matches) {
          this.hideSideMenu = true;
        }

  });
    
  }
}

06.html

<side-menu *ngIf="!hideSideMenu"> ... </side-menu>

07.ts

@Component()
export class ResponsiveComponent implements OnInit {

  isPhonePortrait = false;

  constructor(private responsive: BreakpointObserver) {

  }
  
  ngOnInit() {
  
    this.responsive.observe(Breakpoints.HandsetPortrait)
      .subscribe(result => {

        this.isPhonePortrait = false; 

        if (result.matches) {
          this.isPhonePortrait = true;
        }

  });
    
  }
}

08.html

<div class="container" [ngClass]="{'is-phone-portrait': isPhonePortrait}"> 
 ....
</div>

09.scss

container.is-phone-portrait {
   margin: 0;
   padding:0;
}