@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!

yes, read this https://stackoverflow.com/questions/6850164/get-the-device-width-in-javascript — Álvaro Touzón, Nov 19 '17 at 18:21
Yes it is. I have fxFlex.md and fxHide in my examples. That's angular/flex-layout isn't it? At least I thought it was.. I haven't used flex box outside of angular/flex-layout so maybe I'm wrong? — buzzripper, Nov 20 '17 at 03:01
Sorry, I was refering to the first comment ;) Please check out my answer, this should solve you problem and is the angular way to go — Roman, Nov 20 '17 at 08:40

score 38 · Accepted Answer · answered Nov 19 '17 at 21:50

38

Yes, there is a way!

Just try this:

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

Here are the docs

answered Nov 19 '17 at 21:50

Roman

1

Perfect! Exactly what I was looking for! Thanks! – buzzripper Nov 20 '17 at 12:46

score 5 · Answer 2 · answered Jun 14 '20 at 04:31

5

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>

answered Jun 14 '20 at 04:31

Tom el Safadi

2 Answers2