/ Angular

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:

  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';

@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 { }

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>

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>

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