Is there any way to use Angular / flex-layout API in Typescript file in Angular 11 project

Question

Angular Flex Layout is very useful while working with Angular Material, Is there any way to consume the flex layout API in the TypeScript file?

For example from this URL, is there any way to get the MediaQueries values in the TypeScript file?

breakpoint  mediaQuery
xs  'screen and (max-width: 599px)'
sm  'screen and (min-width: 600px) and (max-width: 959px)'
md  'screen and (min-width: 960px) and (max-width: 1279px)'
lg  'screen and (min-width: 1280px) and (max-width: 1919px)'
xl  'screen and (min-width: 1920px) and (max-width: 5000px)'
lt-sm   'screen and (max-width: 599px)'
lt-md   'screen and (max-width: 959px)'
lt-lg   'screen and (max-width: 1279px)'
lt-xl   'screen and (max-width: 1919px)'
gt-xs   'screen and (min-width: 600px)'
gt-sm   'screen and (min-width: 960px)'
gt-md   'screen and (min-width: 1280px)'
gt-lg   'screen and (min-width: 1920px)'

I mean in the Angular TypeScript file, I can consume the media query for SMALL, LARGE and MEDIUM screen.

Answer 1

Yes, there is a way to use these media queries inside TypeScript files within Angular, but it's a bit hidden.

You can use the Breakpoint Observer API from Angular Material which provides you with the same media queries as used in Angular's FlexLayout API, specified in Material Design.

Predefined list of breakpoints (the widths used may not be completely obvious, but together with the media queries in Material Design it can be traced back):

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;
};

This list can be expanded to your needs. A simple example can be found here as a StackBlitz.

Steps to follow:

1. Import LayoutModule into your app.module.ts and add it to imports.

import { LayoutModule } from "@angular/cdk/layout";

2. Import BreakpointObserver, Breakpoints and BreakpointState inside your component.

import {
  BreakpointObserver,
  Breakpoints,
  BreakpointState
} from "@angular/cdk/layout";

3. Add BreakpointObserver to the constructor.
4. Inside your ngOnInit, add the observing query for a specific viewport (list), as specified inside the Breakpoints list. The list is an array and can hold multiple values:

[Breakpoints.Small, Breakpoints.HandsetPortrait]

Code combined:

export class AppComponent implements OnInit {
  constructor(public breakpointObserver: BreakpointObserver) {}

  viewportWidth: string;

  ngOnInit() {
    this.breakpointObserver
      .observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          this.viewportWidth = "  I am INSIDE the breakpoint";
        } else {
          this.viewportWidth = "  I am OUTSIDE the breakpoint";
        }
      });
  }
}

Final code on StackBlitz. Feel free to play around to your needs.