Using FlexLayout with Angular 5

Tue May 1, 2018 · 3 min read

This is the sixth part in a seven-part series about the JavaScript framework, Angular 5. In this part, we’ll go over adding Flex-Layout to our application to make it responsive.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Flext-Layout and how to use it with Angular 5 Material.

Article Series:

  1. Creating Angular 5 application with Angular-cli
  2. Using Angular Material with Angular 5
  3. Deploy Angular 5 Application to Netlify
  4. Build PWA with Angular 5 App
  5. Build Dynamic themes for Angular Material
  6. Using FlexLayout with Angular 5 (You are here)
  7. Building News App using Angular 5

Final Demo here

If you want to add a touch styling to your Angular application you have to use one of the CSS Libraries, but Angular Material is specially designed for Angular. But it does not have a grid system, so we need to add one or build it ourself.

In the Angular Material article I created a simple grid using flex, but you can use Flex-Layout for more complex uses. Some people won’t like Flex-Layout and would prefer using css flex. It’s up to you. But in this article I’ll talk about how to use Flex-Layout with Angular Material and we’ll turn our previous posts into grid using Flex-Layout.

In our application root run:

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

Now we have to import FlexLayoutModule into our app.module.ts Here’s my app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MaterialModule } from "./material.module";
import { FlexLayoutModule } from "@angular/flex-layout";

import { AppRoutingModule } from "./app-routing.module";

import { ServiceWorkerModule } from "@angular/service-worker";
import { AppComponent } from "./app.component";

import { environment } from "../environments/environment";
import { PostsComponent } from "./posts/posts.component";
import { HomeComponent } from "./home/home.component";
import { NavbarComponent } from "./navbar/navbar.component";
import { ThemeService } from "./services/theme.service";

  declarations: [AppComponent, PostsComponent, HomeComponent, NavbarComponent],
  imports: [
    ServiceWorkerModule.register("/ngsw-worker.js", {
      enabled: environment.production
  providers: [ThemeService],
  bootstrap: [AppComponent]
export class AppModule {}

Let’s use Flex-Layout with our home posts. I’ll use the next code to create our grid

  fxLayout="wrap row"
  <div fxFlex="20%"><!-- our post code here --></div>

To create 4 posts in one row I’ll make fxFlex= 20%. and put your post code instead of the comment, and repeat this part as you want. Open src/app/home/home.component.html

  fxLayout="wrap row"
  <div fxFlex="20%">
    <mat-card class="example-card">
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
        alt="Photo of a Shiba Inu"
          The Shiba Inu is the smallest of the six original and distinct spitz
          breeds of dog from Japan. A small, agile dog that copes very well with
          mountainous terrain, the Shiba Inu was originally bred for hunting.
        <button mat-button>LIKE</button> <button mat-button>SHARE</button>

Check the flex-layout documentation for more complex uses.

Now you can remove our css code in home.component.scss.

Next: Building News App using Angular 5

Some useful Links: