Menu
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!
937
Using Angular Flex layouts, we can create any HTML layouts that are responsive on all devices.
Installation of Angular Flex-LayoutUse the following command to use Angular Flex layouts in your projects. After installing flex layout we need to import flexLayoutModule in our app. module. ts file as shown below.
A core principle of Angular is the separation of concerns. By deprecating flex-layout in favor of CSS, we continue to guide users towards more readable and maintainable code.
fxLayout is a directive used to define the layout of the HTML elements. i.e., it decides the flow of children elements within a flexbox container. fxLayout should be applied on the parent DOM element i.e., flexbox container. And fxLayout directive case sensitive.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
