New! Unlimited audio, video & web asset downloads! Unlimited audio, video & web assets! From $16.50/m
Advertisement
  1. Code
  2. Angular 2+
Code

How to Use Material Design in Angular 6

by
Difficulty:BeginnerLength:ShortLanguages:

Angular has evolved over the years and new exciting features have been continuously added to each version. One of the improvements is in Material Design, which comes with new components. This tutorial will look at Angular Material and how to incorporate it in Angular 6 projects.

What Is Material Design?

Material Design is a design language for web and mobile apps which was developed by Google in 2014. Material Design makes it easy for developers to customize their UI while still keeping a good-looking app interface that users are comfortable with. With Material Design, you get a well-organized format along with the flexibility to express your brand and style.

For an example of Material Design, check out Houzz, a home design application that won the Google Play awards in 2016. This app makes use of Material Design to fit its many features into the limited mobile device real estate. This provides a good experience for the user by letting them view and navigate the application without feeling overwhelmed. It is truly one of the best Material Design apps. 

This post is not about Material Design, so we will not go into all the details. If you want to learn more, there is a great tutorial on Material Design on the Envato blog.

Introduction to Angular Material

Angular Material consists of a suite of pre-built Angular components. Unlike Bootstrap, which gives you components that you can style any way you want, Angular Material strives to provide an enhanced and consistent user experience. At the same time, it gives you the ability to control how different components behave.

Just like Angular, Angular Material has evolved a lot since its initial release, with great improvements and bug fixes.

How to Add Angular Material to Your Project

In order to add Angular Material to a project, we will use the ng add command which is used to add new capabilities to Angular projects. This command happens to be a new feature in Angular 6, and it is as simple as:

This command will add the library to an existing project and bring in theme CSS in angular.json. It will also add scripts in index.html and update the AppModule.

Another feature in Angular 6 is ng update, which updates npm dependencies when a new version is released. It also updates your RxJS code and Material Design code to take advantage of new APIs.

Dependencies and Components

Angular material consists of several design components which fall under the following categories:

  • Form controls
  • Buttons and indicators
  • Navigation and layout
  • Popups and modals
  • Data table

You can generate the starter components using the ng update command. Some of the schematics available via this command are:

  • Navigation
  • Dashboard
  • Table

These schematics can easily be installed with the ng generate command as follows:

  • ng generate @angular/material:material-table --name <component-name>: generates a component that displays data with a data table
  • ng generate @angular/material:material-nav --name <component-name>: generates a component with a side navigation and a toolbar
  • ng generate @angular/material:material-dashboard --name <component-name>: generates a component that contains a dynamic grid list of cards.

Build an Angular 6 Material Application

To get started, you will need Angular CLI. If you don't have Angular CLI installed,  simply install it by issuing the following command.

Next, we will need to initialize a new Angular project. To do that, issue the following command, where Material-ng is the name of our Angular project.

This command creates several Angular template files for your project and installs the necessary starter dependencies.

Go into the directory of your project and add Angular Material to your project.

Next, we will add some components that are common to many applications, like the navigation.

Add a Navigation Bar

To add a navigation bar, simply issue:

This command adds a collapsible side navigation and drawer component. You should get the following output, which has four files generated for us, namely my-nav.component.css, my-nav.component.html, my-nav.component.spec.ts, and my-nav.component.ts.

Now open my-nav.component.html and you should see all the HTML code for the navigation that was generated for us.

By default, a starter Angular project will serve the default page, but we want to be able to see the magic of Material Design! In order to make use of our generated Material Design nav component, open app.component.html and replace all the code with:

Now, when you run the app, you'll see the navigation bar.

You should also notice that the navigation component we added has been imported into the main module as shown:

In my-nav.component.html, let's make a few changes to the menu lists as well:

Now, you can start the development server by running: 

The result should look like this:

Material Design Angular app layout

As you can see, Angular Material provides an easy way to get your application up and running. With just a few commands and a few lines of code, we have been able to incorporate Material Design in our Angular application!

Visit our GitHub repo for the full source code of this example app.

Conclusion

I hope this tutorial has helped you understand how to use the power of Material Design in your app for a top-notch UI. For more information about Material Design in Angular 6, check out the official docs which contain ready-to-use templates. It's a great place to learn about Angular. You can also check out our Angular tutorials and courses here on Envato Tuts+!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.