Using FlexLayout with Angular 5

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:
Creating Angular 5 application with Angular-cli
Using Angular Material with Angular 5
Deploy Angular 5 Application to Netlify
Build PWA with Angular 5 App
Build Dynamic themes for Angular Material
Using FlexLayout with Angular 5 (You are here)
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";

@NgModule({
  declarations: [AppComponent, PostsComponent, HomeComponent, NavbarComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MaterialModule,
    FlexLayoutModule,
    AppRoutingModule,
    ServiceWorkerModule.register("/ngsw-worker.js", {
      enabled: environment.production
    })
  ],
  providers: [ThemeService],
  bootstrap: [AppComponent]
})
export class AppModule {}
JavaScript
Copy

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

<div
  class="container"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="0.5%"
  fxLayoutAlign="center"
>
  <div fxFlex="20%"><!-- our post code here --></div>
</div>
HTML
Copy

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

<div
  class="container"
  fxLayout="wrap row"
  fxLayout.xs="column"
  fxLayoutGap="1%"
  fxLayoutAlign="center"
>
  <div fxFlex="20%">
    <mat-card class="example-card">
      <mat-card-header>
        <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>
      </mat-card-header>
      <img
        mat-card-image
        src="/assets/shiba2.jpeg"
        alt="Photo of a Shiba Inu"
      />
      <mat-card-content>
        <p>
          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.
        </p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button> <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>
HTML
Copy

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

Using FlexLayout with Angular 5

Article Series:

Some useful Links: