@angular/flex-layout How To: different class based on screensize?

Question

Is there a way to have @angular/flex-layout change the class based on screen size?

I know I can do this:

<div fxFlex="grow" fxLayout="row" fxLayout.xs="column">

and this:

<div fxFlex="22"    fxFlex.md="10px" fxHide.lg>

etc.

I'd like to be able to do something like this:

<div class="myWideClass" class.xs="myNarrowClass">

Is there any way to do this kind of thing - change the class based on the screen width?

Thanks!

Answer 1

Yes, there is a way!

Just try this:

<div [ngClass.xs]="'myNarrowClass'"
     [ngClass.md]="{'myWideClass': true}"></div>

Here are the docs

ngClass API Responsive