Using FlexLayout with Angular 5
Tags: angular2, angular, javascript, angular5
Published: 2019-08-13 12:37:43

---
title: Using FlexLayout with Angular 5
published: true
tags: angular2,angular,javascript,angular-5
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*DNGtiMt4J3LVnejn5gJ2Fw.jpeg)<figcaption>Angular5 , flexlayout ( image source topal)</figcaption>

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.

> _Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)_

> _Article Series:_

1. [Creating Angular 5 application with Angular-cli](https://medium.com/@geeksamu/creating-angular-5-application-with-angular-cli-e390ed710716)
2. [Using](https://medium.com/@geeksamu/using-angular-material-with-angular-5-6f12f75efa12)[Angular Material with](https://medium.com/@geeksamu/using-angular-material-with-angular-5-6f12f75efa12)[Angular 5](https://medium.com/@geeksamu/using-angular-material-with-angular-5-6f12f75efa12)
3. [Deploy Angular 5 Application to Netlify](https://medium.com/@geeksamu/deploy-angular-5-application-to-netlify-35b8964bce99)
4. [Build](https://medium.com/@geeksamu/build-pwa-with-angular-5-app-894499e2c55f)[PWA with Angular 5 App](https://medium.com/@geeksamu/build-pwa-with-angular-5-app-894499e2c55f)
5. [Build Dynamic themes for](https://medium.com/@geeksamu/build-dynamic-themes-for-angular-material-3b4ef118ba31)[Angular Material](https://medium.com/@geeksamu/build-dynamic-themes-for-angular-material-3b4ef118ba31)
6. Using FlexLayout with Angular 5 (**You are here)**
7. [Building](https://medium.com/@geeksamu/building-news-app-using-angular-5-99a9e5fb4669)[News App using](https://medium.com/@geeksamu/building-news-app-using-angular-5-99a9e5fb4669)[Angular 5](https://medium.com/@geeksamu/building-news-app-using-angular-5-99a9e5fb4669)

> _Final_ [_Demo here_](https://angular-5-article-series.netlify.com/)

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](https://github.com/angular/flex-layout/wiki/API-Documentation#containers) for more complex uses.

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

Next: [Building](https://medium.com/@geeksamu/building-news-app-using-angular-5-99a9e5fb4669)[News App using](https://medium.com/@geeksamu/building-news-app-using-angular-5-99a9e5fb4669)[Angular 5](https://medium.com/@geeksamu/building-news-app-using-angular-5-99a9e5fb4669)

### If you liked this article, hit that clap button below 👏. check out other articles I’ve written [here](https://blog.wb.gy). And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through [PayPal](http://paypal.me/geeksamu), or [‘Buy Me a Coffee’](https://ko-fi.com/geeksamu) :)

[Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu](https://ko-fi.com/geeksamu)

If you have any question comment it below or You can find me on Twitter [@geeksamu](https://twitter.com/geeksamu)

[Ahmed ⚯͛ (@geeksamu) | Twitter](https://twitter.com/geeksamu)