Getting started with Angular Flex-Layout

In this post, I will show how to use Angular Flex-Layout in HTML.

Angular layout provides a sophisticated API using Flexbox. This module provides Angular developers with component layout features using a custom layout API. Angular Flex-Layout is a stand-alone library developed by the Angular team for designing sophisticated layouts.

When creating an HTML page in Angular, using Angular Flex-Layout allows us to easily create FlexBox-based page layouts with a set of directives available for use in your templates. This eliminates the need to write a separate CSS style.

In a normal CSS flexbox or CSS grid, responsive layouts are made using complex CSS code and media queries.

Powerful layout functions

Flex-layout is a Typescript-based UI layout engine that uses HTML markup to specify the layout configurations.

Flex layout directives for Flexbox containers

The following API or directives are used on flexbox containers,

1. fxLayout
2. fxLayoutGap
3. fxLayoutAlign

fxLayout

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 and it should be applied to the parent DOM element i.e., the flexbox container. This directive is case sensitive and also allowed values of fxLayout are row, column, row-reverse, and column-reverse.

<div fxLayout="row">
<div class="sub-section-1"></div>
<div class="sub-section-2"></div>
</div>

fxLayoutAlign

fxLayoutAlign directive defines the alignment of children elements within the flexbox parent container.
Syntax:

<div fxLayout="row" fxLayoutAlign="<main-axis> <cross-axis>" ></div>

Example:

<div fxLayout="row" fxLayoutAlign="center start"></div>

fxLayoutGap

fxLayoutGap is a directive that defines the gap between the children items within a flexbox container
Example:

<div fxLayoutGap="20px"></div>

Angular flex layout directives for flexbox children

The following directives are applicable to flexbox children elements

• fxFlex
• fxFlexOrder
• fxFlexOffset
• fxFlexAlign
• fxFlexFill

What is fxFlex?

fxFlex is one of the most useful and powerful API in Angular flex layout. It should be used on children’s elements inside a fxLayout container. It is responsible for resizing the elements along the main-axis of the layout.

<div fxLayout="row" fxLayoutAlign="start center">
<div fxFlex="30"></div>
<div fxFlex="30"></div>
</div>

fxFlexOrder

Defines the order of a flexbox item,

<div fxFlexOrder="2"></div>

fxFlexOffset

Offset a flexbox item in its parent container flow layout.

<div fxFlexOffset="20px"></div>

fxFlexAlign

Works like fxLayoutAlign, but applies only to a single flexbox item, Instead of all of them.

<div fxFlexAlign="center"></div>

fxFlexFill

Maximizes the width and height of an element in a layout container.

<div fxFlexFill></div>

Flex with Align — Self

‘flex-align’ can change the alignment for a single element only.

<div fxFlexAlign="baseline">

Understanding of Layout with ‘layout - align’

Flex items are primarily laid out in horizontal rows or vertical columns.

Layout Direction

We can defined layout direction as a container { fxLayout: row | row-reverse | column | column-reverse; } row (default): left to right in ltr; right to left in rtl;, which has four possible values:
row

1. row-reverse
2. column
3. column-reverse

Alignment in Layout Direction (Horizontal)

We can use layout alignment attributes value to adjust item’s horizontally and it’s defined at main-axisfxLayoutAlign=”<main-axis>”. These have seven possible values,

1. none
2. start (default)
3. end
4. center
5. space-around
6. space-between
7. space-evenly

Alignment in Perpendicular Direction (Vertical)

The same concept applies to vertical layout alignment attributes:

1. none
2. start
3. center
4. end
5. stretch (default)

Use the following code to align the layout vertically and horizontally.

• Layout Direction: row
• Alignment in LayoutDirection(Horizontal): start
• Alignment in Perpendicular Direction(Vertical): center

<div fxLayout="row" fxLayoutAlign="start center">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

Another example:

• Layout Direction: column
• Alignment in LayoutDirection(Horizontal): end
• Alignment in Perpendicular Direction(Vertical): center

<div fxLayout="column" fxLayoutAlign="end center">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

Responsive Layout Directions

Angular Flex-Layout responsive API

In Angular flex-layout we can easily change components and HTML templates layout size, position on different breaking points, and automatically adjust for different screen sizes and viewports using a responsive API engine. Using this we create an HTML template that looks good on all devices.

Responsive layout has some predefined breakpoint aliases with its media query values.

Available Breakpoints List in Angular Flex-LayoutAn example highlighting responsiveness is shown below,

In this row layout example, all elements in the row layout are aligned horizontally. However on mobile devices, we cannot show these all elements in row layout as the width of the mobile device is small. In the example listed below we use a responsive breakpoint fxLayout.xs= “column”. This transitions to a column layout on mobile devices. The usage of fxHide.lt-md on the second child will not display below a screen width of 960px.

<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="20px">
 <div fxFlex="35"> Child - One </div>
 <div fxFlex="30" fxHide.lt-md> Child - Two </div>
 <div fxFlex="35" fxLayoutAlign="space-around center">
    <div  fxFlex="50" fxFlex.lt-lg="80"> Sub-child - One</div>
 </div>
</div>

Installation of Angular Flex-Layout

Use the following command to use Angular Flex layouts in your projects.

npm install --save @angular/flex-layout @angular/cdk

After installing flex layout we need to import flexLayoutModule in our app.module.ts file as shown below.

import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { CardLayoutComponent } from './card-layout/card-layout.component';
@NgModule({
imports: [ FlexLayoutModule ],
});

Let’s create a component called card-layout in our project,

ng generate component card-layout

After creating a card-layout component lets add the example code shown below in the HTML template file.

In this example, we have cards which are added in one row and aligned within a single column. When we check for responsiveness in the browser, it auto adjusts the card layout because of responsive breakpoints of fxLayout.md and fxLayout.lt-md with fxFlex.md and fxFlex.lt-md.
card-layout.component.html

<div class="container" fxLayout="column" fxLayout.md="row" fxLayoutGap="20px">
   <div class="cardWrap" fxLayout.lt-md="column" fxLayout.md="column"  fxLayout="row" fxFlex.md="50" fxLayoutAligmnet="space-between center" fxLayoutGap="20px" >
   <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
   <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
   <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 </div>
 <div class="cardWrap" fxLayout.lt-md="column" fxLayout.md="column" fxLayout="row" fxFlex.md="50" fxLayoutAligmnet="space-between center" fxLayoutGap="20px" >
 <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 <div fxFlex.lt-md="100" fxFlex="35" >Card</div>
 </div>
</div>

Card-layout.component.scss

.container .cardWrap div{
height: 300px;
border:2px solid gray;
}

The output is as shown below. Using Angular Flex layouts, we can create any HTML layouts that are responsive on all devices.

References

1. A. (2016, December 30). Flex Layout for Angular. DigitalOcean Community. https://www.digitalocean.com/community/tutorials/angular-flex-layout
2. angular/flex-layout. (n.d.). GitHub. Retrieved August 6, 2020, from https://github.com/angular/flex-layout
3. Burleson, T. (n.d.). Layout Demos: Version: 7.0.0-beta.23. Firebaseapp. Retrieved August 6, 2020, from https://tburleson-layouts-demos.firebaseapp.com/#/docs

If you liked this post, here are a few more that may interest you,

• Angular or React–Don’t roll the dice
• Microservices: The Secret Weapon for Transformational Change
• User Goals and Their Influence on the Design Process