Show and Ask HN: Declarative Responsive API on Angular

1 point

6 years ago

In #angular you have a declarative responsive API[1] for short access to responsive. It's included on the `FlexLayoutModule` but you can use it without flex or grid elements like tables.

The aliases for media queries are very useful for common scenarios. Just feel the words behind the letters:

- xs: eXtra Small

- sm: SMall

- md: MeDium

- lg: LarGe

- xl: eXtra Large

- lt-sm: Lower Than SMall

- lt-md: Lower Than MeDium

- lt-lg: Lower Than LarGe

- lt-xl: Lower Than eXtra Large

- gt-xs: Greater Than eXtra Small

- gt-sm: Greater Than SMall

- gt-md: Greater Than MeDium

- gt-lg: Greater Than LarGe

As you use it for hiding elements, if you prefer to doesn't even send it to the client you are not limited to the declarative API on HTML templates, the script API[2] with MediaObserver lets you be in more control.

In general, the so-called module "Angular Layout" provides a sophisticated API using Flexbox, CSS Grid, and mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, media query observables, and injected DOM flexbox-2016 and CSS Grid stylings.

There are some advantages[3] including independence of Angular Material and no external CSS requirements among others.

The documentation is somewhat limited but I like it a lot but mostly for media queries. It's true we can deal with flex and grids directly on CSS but since you were working with Angular this can be useful for that too.

Do you have any other recommendations to deal with these 3 aspects (mediaQueries, CssFlex, CssGrid) on Angular?

---

[1] https://github.com/angular/flex-layout/wiki/Responsive-API

[2] https://github.com/angular/flex-layout/wiki/API-Documentation

[3] https://github.com/angular/flex-layout/wiki/Why-use-Angular-Layout#advantages