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.

Read this article on my new tool Medium Plus, for a smart, customizable reading experience.

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. 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

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

Before you go, check me out the next useful Links: 👀

👨️ My Website/Portfolio

🔥 Get your $50 in FREE hosting credit HERE

⚡ Best Web Browser for 2019 | Privacy First & Chromium Based

🤑️ No Stripe? How To Get Paid With Payoneer ⇒ $25 + $10 Sign UP Bonus