In this article, we are going to show you how to prepare our Angular project and how to install Angular Material in a few simple steps. But first things first. Before we start with the Angular Material features, we need to create the project first.

So let’s dive right into it.

For the complete navigation and all the basic instructions of the Angular Material series, check out: Introduction of the Angular Material series.

The source code is available at GitHub Getting Started With Angular Material – Source Code

We are going to divide this post into several sections:

Project Creation

We are going to use Angular CLI through the entire project (and we strongly advise you to do the same), thus creating our project is no exception to that. So, let’s open a command prompt window and create our Angular project:

Once the creation is done, we are going to start the Visual Studio Code editor and open our project.

Angular Material Installation

We are going to use npm to install the required packages. Besides installing Angular Material, we need to install CDK and Animations as well.

So, let’s do that first by navigating to the root folder of our project and running the command:

After installation finishes, we should see this result:

packages installed - getting started with angular material

Now, we need to configure animations, by importing BrowserAnimationsModule into the app.module.ts file:

To continue, let’s include the prebuild theme for Angular Material. The theme is required and we can choose one of the available pre-built themes:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-blugrey.css
  • purple-green.css

To include a theme, we need to open the styles.css file and include the following line:

The next step is to install the hammerjs library for the gesture support. In order to have a full feature of some components, we need to install it:

hammerjs - angular material installation

After the installation, we are going to import it as a first line in the maint.ts file:

And the last step is to add Material Icons if we want to. This is an optional step, but since we are going to use those icons, we are going to add them as well in the index.html file:

Creating Material Module

Even though we can import all the required components into the app.module.ts file, this is not recommended. A better solution is to create a separate module with all the required material imports, and then import that module into the app.module.ts file. That being said, let’s do it:

This command will create a new folder material with the material.module.ts file inside. But this file is missing one thing and that’s the exports array. So, let’s add it:

Finally, we need to import this MaterialModule int the app.module.ts file:

That is it. We have prepared everything we need to use the Material components. Without further ado, we are going to start using them.

Creating the Layout Component

This component is going to be an entry point for our entire application, so let’s create it and import its selector inside the app.component.ts file:

layout component - angular material installation

This command will create our component files and import them into the app.module.ts file.

Angular Flex Layout

Before we modify the HTML component file, we need to install one more library: @angular/flex-layout. This library will help us create a responsive application. So, let’s install it:

angular flex - angular material installation

And we need to register it inside the app.module.ts file:

Now, we can modify our layout.component.html file:

As you can see, we use some angular/flex directives to create a responsive wrapper around our content. With the fxLayout element, we define the flow order of the child elements inside the container. The fxLayoutAlign will position children according to both main-axis and the cross-axis.

The fxFlex element resizes the child element to 80% of its parent, and if the screen goes below the medium than the child will take a 100% of its parent. If you want to read more about flex-layout, you can find plenty of material here: Flex-Layout-Documentation.

With the <ng-content> element, we are using angular content projection.

We have two more classes: layout-wrapper and flex-wrapper, so let’s implement them inside the layout.component.css file:

Excellent.

All we have to do is to remove all the content from the app.component.html file and introduce this component by using its selector:

We can start our application by typing ng serve and see that application actually works.

Creating Home Component and Using Material Tabs

Let’s create the Home component file structure first:

home component

Now, let’s modify the home.component.html file:

We need to modify the app.component.html file:

And we need to modify the home.component.css file as well:

To use our first material component, the mat-tab component, we need to register it inside the material.module.ts file:

And then to modify the home.component.html file:

Now, we can inspect our result:

home component

Additional Mat-Tab Features

First of all, let’s style our tab content a little bit more, to center our text inside every tab:

tab center content

This control has its own events. The selectedTabChange event is emitted when the active tab changes. The focusChange event is emitted when the user navigates through tabs with a keyboard navigation.

So, let’s use the selectedTabChange event:

And we need to modify the home.component.ts file:

Right now, as soon as we switch our tabs, we will see the event object logged into the console window:

log change event tab

Conclusion

Everything looks great. We have our first material component and in the following articles, we are going to work with other material components as well.

In this article we have learned:

  • How to prepare the Angular project,
  • How to install Angular Material, CDK, and Animations
  • The way to install and use the @angular/flex-layout library
  • How to work with the Tab Material component

In the next article, we are going to learn more about creating a navigation menu and menu side-bar with Angular routing.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Angular content we encourage you to subscribe to our blog.