@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

If someone is looking for a way to add a class if it is bigger than xs for example, you could do:

<div [ngClass.gt-xs]="'myNarrowClass'"></div>