Adaptive Layout Design – Angular Flex Layout


You probably have heard about Responsive Layout design but let me remind you anyway. Responsive layout is where components and elements of a web page change size and position based on different breaking points – Web apps that adapt to any screen size.

Unlike responsive layout, in Adaptive Layouts different components and elements are displayed or hidden on different screen sizes. While responsive design is amazing at what it does, it also has it limits especially trying to fit the same components in a large screen size and an extra small screen size. Sometimes you just want to have different components and elements for different screen sizes.

How it works

Angular Flex Layout provides you with the tools for Adaptive Layout design – fxHide, fxShow and ngIf. As you may have already guessed both fxHide and fsShow directives are used for hiding elements while ngIf adds or removes components by using DOM (Direct Object Manipulation). DOM manipulation may be useful at some instance by reducing the footprint of your Angular application on the browser thus reducing the resources used by your app.

You can use a combination of the directives with the different breakpoint to hide and show elements on your angular application. Angular Flex Layout has four breakpoint aliases – xs, sm, md and lg. To show a component only on XS devices, you do the following:

<app-component-name fxShow="false"  fxShow.xs="true" ></app-component-name>

Note the fxShow Directive with the dot notation followed by the preferred breakpoint alias. The first fxShow=”hide” is used to hide the component on all screen sizes so that you can show it on a specific screen using the second fxShow.xs=”true”.

To show a component on all screens sizes above small, you can use the gt-sm (greater than small) alias as shown below:

<app-component-name fxShow="false""true" ></app-component-name>

This will show the components on all screen sizes starting md (medium screen size) and above. You can get a list of all breakpoints below.


 Adaptive Layout Design - Angular Flex Layout

Breakpoint Alias for Angular Flex Layout

Unfortunately, you can not do that with *ngIf, am not sure whether support will be coming – it’s not clear on their site. it would be amazing if you could use it as follows:

<app-component-name *"true" ></app-component-name>

Fortunately, there’s a workaround for this, while not as nice as the one above, it requires you to add some code to your typescript file of your component. As shown below:


import {ObservableMedia} from '@angular/flex-layout'; //import obersavable media

  selector : 'app-component',
  template : 'app-component.html'

export class AppComponent {
  constructor(public media:ObservableMedia ) { //declare a public variable of observable media

Now you can use *ngIf in your component template as shown below


<div *ngIf="media.isActive('xs')">
     This content is only shown on extra small devices
<div *ngIf="media.isActive('sm')">
     This content is only shown on small devices
<div *ngIf="media.isActive('md') || media.isActive('lg')">
     This content is only shown on medium devices and large devices


Adaptive Layout design is a very important tool in a developer’s arsenal. If used wisely in combination with responsive layout design, it can produce some magical results. If used poorly, it can lead to a bloated Angular app with poor performance. This is due to increased number of component that do essentially the same thing.

If you have any question regarding this topic or any other feel free to drop a comment  below.

6 Replies to “Adaptive Layout Design – Angular Flex Layout”

  1. Replacing CSS by JS, and for what benefit? I can’t see where is the benefit for the user.
    Personally, if something is doable with CSS, I use it, and if it’s not, then I use JS. There is already the possibility to do this using grid system classes.
    Not a feature I would use.

    1. Angular Flex Layout is a directive based Grid Framework, Just like Bootstrap uses CSS Classes, this library uses Angular Directive, enabling it be more closely knitted with Angular Framework. It provides an abstraction of the CSS Grids and Flexbox Layout, giving you more control over your design. Yes, you could use pure CSS, but let’s be honest, you would end up creating some sort of mini-framework and it won’t even have features offered by Angular Flex Layout. Having a responsive design system that manipulates DOM instead of just hiding it from the user making your application more closely. Angular Flex Layout offers real tangible benefits over something like bootstrap without making it technically difficult to implement. And the best part is, its independent of Angular Material, so you are free to use it even bootstrap if you need a much better Grid System with bootstrap components.

  2. Very helpful post. Thank you! I had been running an interval to constantly check for window size changes which I turned into an observable that provided similar functionality. This a much nicer and cleaner approach.

    One question: is this kind of thing possible *ngIf=”media.isActive(‘gt-xs’)”?

    1. I haven’t had time to try that, but as soon as I can, I will inform you but I don’t see any reason as to why not.

    2. Hi, I have had the chance to test the functionality and it works amazingly well. Here is the code i used:

      if (‘gt-sm’)) {
      this.mode = ‘side’;
      this.sideNavOpened = true;
      } else if (‘md’)) {
      this.mode = null;
      this.sideNavOpened = true;
      } else {
      this.sideNavOpened = false;

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.