Quick start with Angular Material and Flex-Layout

To design your Angular application, it is possible to use multiple CSS libraries, but Angular Material is specially designed for Angular projects and easy to implement. With mat elements, you can make a nice interface in a very short amount of time. Flex-layout is a package made for Angular to use CSS flex-box features, you just add directives in html tags to render it flexible and responsive. Let’s see how beginning with all this!

Check out our Angular In-House trainings or a public Angular courses.
Try out fossilo.com our angular project to archive complete websites.

For more detailed explanations, you can check my video out.

Sponsored by letsboot.com

What do we do today?

1. Create a new Angular project, install Material and flex-layout
2. Create the main layout with a toolbar
3. Create a simple photo gallery: 2 examples

Go on our Youtube channel for more videos

Create a new Angular project, install Material and flex-layout

First, let’s create a new Angular project with @angular/cli in your code repository:

ng new material-project
cd material-project
ng serve

Hint: If you get an error like “Cannot find module ‘@angular-devkit/core”, take a look at this page: https://github.com/angular/angular-cli/issues/9307

Then, let’s install the 3 main packages of Angular Material, run in a terminal:
npm install --save @angular/material @angular/cdk @angular/animations

In app.module.ts, you have to import ‘BrowserAnimationsModule’ and the Material modules you need for your project:

Hint: in a big project, a best practice should be to create a specific module for Material and export MatModules to be used in all the other modules and components of your project by importing only one module, your “MaterialModule”. Otherwise, you have to import the MatModules every time in each module.

To be able to use the icons, you have to add a link tag in src/index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

If you want to use a theme, you can add the following import in src/styles.css:

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

If you want gesture support, you have to install the package hammerjs

npm install --save hammerjs

And import it in your app’s entry point (usually it is the file src/main.ts):

import 'hammerjs';

Flex-Layout module

Install the flex-layout module with npm:

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

Then, import the module in your app.module.ts and add it to the NgModule’s imports:

import { FlexLayoutModule } from ‘@angular/flex-layout’;
@NgModule({  
    declarations: [ ... ],  
    imports: [ ..., FlexLayoutModule ], 
})
export class AppModule { }

Create the main layout with a toolbar

To start fresh, remove all the html in app.component.html except the the title. Add a material toolbar after the title using the tags <mat-toolbar> and <mat-toolbar-row> if you want a vertical menu.

Make sure you have imported the “MatToolbarModule” in app.module.ts.

Title + mat-toolbar

Create a simple photo gallery

Example 1: A simple photo gallery

Let’s display some photos with a flexible and responsive layout.

Screen shot of the example 1

To create the simple gallery, let’s use the fxLayout (container) and fxFlex (elements) directives and the mat-card-image element:

Example 1: photo gallery with mat-card-image and flex-layout

Check the flex-layout official documentation to get all the directives and options.

The CSS is at the end of the example 2 below.

Example 2: Create picture cards and a mini search form

In this case, let’s loop through an array and display the photos and its title with<mat-card>. I show you simply how to add icons and form field with Angular Material.

Screen shot of the example 2

Here you can find an example of a form. I use the elements <mat-form-field> and matInput. Do not forget to import MatFormFieldModule and MatInputModule in app.module.ts! You need both. For the photo gallery, wrap your all code with a <div> that contains the fxLayout container directives. Then, you can use <mat-card> to structure the gallery. The fxFlex directives places the title in relation to the icons. Finally, mat-card-image stretches the image to the container width.

Search bar and photo gallery with a “card layout”

The search form is non-functional, it can be explained in an other article.

Here is the related CSS of the example 1 and 2, add it to app.component.css:

That’s it! You have now the basics to use Angular Material and flex-layout in your Angular project. Go to the official documentation to find and play with nice elements.

You can find my code on Github.

See you next time for another article about Angular4 ! Follow me on LinkedIn or Medium and take a look at our letsboot.com medium article series!