Using FlexLayout with Angular 5

This is the sixth part in a seven-part [series](https://blog.wb.gy/angular-5-article-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:

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

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

Copy
1import { BrowserModule } from "@angular/platform-browser";
2import { NgModule } from "@angular/core";
3import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
4import { MaterialModule } from "./material.module";
5import { FlexLayoutModule } from "@angular/flex-layout";
6
7import { AppRoutingModule } from "./app-routing.module";
8
9import { ServiceWorkerModule } from "@angular/service-worker";
10import { AppComponent } from "./app.component";
11
12import { environment } from "../environments/environment";
13import { PostsComponent } from "./posts/posts.component";
14import { HomeComponent } from "./home/home.component";
15import { NavbarComponent } from "./navbar/navbar.component";
16import { ThemeService } from "./services/theme.service";
17
18@NgModule({
19  declarations: [AppComponent, PostsComponent, HomeComponent, NavbarComponent],
20  imports: [
21    BrowserModule,
22    BrowserAnimationsModule,
23    MaterialModule,
24    FlexLayoutModule,
25    AppRoutingModule,
26    ServiceWorkerModule.register("/ngsw-worker.js", {
27      enabled: environment.production
28    })
29  ],
30  providers: [ThemeService],
31  bootstrap: [AppComponent]
32})
33export class AppModule {}

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

Copy
1<div
2  className="container"
3  fxLayout="wrap row"
4  fxLayout.xs="column"
5  fxLayoutGap="0.5%"
6  fxLayoutAlign="center"
7>
8  <div fxFlex="20%"><!-- our post code here --></div>
9</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

Copy
1<div
2  className="container"
3  fxLayout="wrap row"
4  fxLayout.xs="column"
5  fxLayoutGap="1%"
6  fxLayoutAlign="center"
7>
8  <div fxFlex="20%">
9    <mat-card className="example-card">
10      <mat-card-header>
11        <div mat-card-avatar className="example-header-image"></div>
12        <mat-card-title>Shiba Inu</mat-card-title>
13        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
14      </mat-card-header>
15      <img
16        mat-card-image
17        src="/assets/shiba2.jpeg"
18        alt="Photo of a Shiba Inu"
19      />
20      <mat-card-content>
21        <p>
22          The Shiba Inu is the smallest of the six original and distinct spitz
23          breeds of dog from Japan. A small, agile dog that copes very well with
24          mountainous terrain, the Shiba Inu was originally bred for hunting.
25        </p>
26      </mat-card-content>
27      <mat-card-actions>
28        <button mat-button>LIKE</button> <button mat-button>SHARE</button>
29      </mat-card-actions>
30    </mat-card>
31  </div>
32</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