'Angular Flex-Layout, Conditional Style/class according to Screen Resolution

According to this post https://www.angularjswiki.com/flexlayout/basics/ In the item List of Available Breakpoints in Angular Flex Layout

The Breakpoints are: | breakpoint | breakpoint meaning | mediaQuery | | -------- | - | -------------- | | xs | extra small | ‘screen and (max-width: 599px)’ | | sm | small medium | ‘screen and (min-width: 600px) and (max-width: 959px)’ | | md | medium | ‘screen and (min-width: 960px) and (max-width: 1279px)’ | | lg | large | ‘screen and (min-width: 1280px) and (max-width: 1919px)’ | | xl | extra large | ‘screen and (min-width: 1920px) and (max-width: 5000px)’ | | lt-sm | less than small medium | ‘screen and (max-width: 599px)’ | | lt-md | less than medium | ‘screen and (max-width: 959px)’ | | lt-lg | less than large | ‘screen and (max-width: 1279px)’ | | lt-xl | less than extra large | ‘screen and (max-width: 1919px)’ | | gt-xs | greater than extra large | ‘screen and (min-width: 600px)’ | | gt-sm | greater than small medium | ‘screen and (min-width: 960px)’ | | gt-md | greater than medium | ‘screen and (min-width: 1280px)’ | | gt-lg | greater than large | ‘screen and (min-width: 1920px)’ |

Is it possible with FlexLayout to apply some Style, or CSS class according to the Resolution?

NOTE: sorry for the before text stackoverflow has a bug with MD table, in edition mode works fine!

enter image description here

csssassconditional-statementsangular-flex-layout


Solution 1:[1]

Yes you can use the breakpoints

with ngClass:

<div ngClass.gt-lg="text-large"></div>

with ngStyle:

<div ngStyle.gt-lg="background: red"></div>

Or, depending on your use case, you can

Set up the fxFlex breakpoints in your scss:

// variables.scss or styles.scss
$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)';

and use them like this:

// styles.scss or my.component.scss
@import 'variables.scss';
@media #{$gt-md} {
  .asdf {
    color: blue;
  }
}

<!-- my.component.html -->
<div class="asdf"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions