Using FlexLayout with Angular 5

Angular5 , flexlayout ( image source topal)

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.

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
2. UsingAngular Material withAngular 5
3. Deploy Angular 5 Application to Netlify
4. BuildPWA with Angular 5 App
5. Build Dynamic themes forAngular Material
6. Using FlexLayout with Angular 5 (You are here)
7. BuildingNews App usingAngular 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: BuildingNews App usingAngular 5

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee’ :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter