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:
ng add @angular/material
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: generates a component that displays data with a data table -
ng generate @angular/material:material-nav --name: generates a component with a side navigation and a toolbar -
ng generate @angular/material:material-dashboard --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.
npm install -g @angular/cli
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.
ng new Material-ng
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.
cd MaterialApp ng add @angular/material
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:
ng generate @angular/material:material-nav --name myNav
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.
CREATE src/app/my-nav/my-nav.component.css (129 bytes) CREATE src/app/my-nav/my-nav.component.html (958 bytes) CREATE src/app/my-nav/my-nav.component.spec.ts (699 bytes) CREATE src/app/my-nav/my-nav.component.ts (580 bytes) UPDATE src/app/app.module.ts (795 bytes)
Now open my-nav.component.html and you should see all the HTML code for the navigation that was generated for us.
Menu Link 1 Link 2 Link 3 Material-ng
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:
#app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyNavComponent } from './my-nav/my-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';
@NgModule({
declarations: [
AppComponent,
MyNavComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
LayoutModule,
MatToolbarModule,
MatButtonModule,
MatSidenavModule,
MatIconModule,
MatListModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
In my-nav.component.html, let’s make a few changes to the menu lists as well:
Home Form controls Navigation Layout Buttons and Indicators Popups & Modals Data table
Now, you can start the development server by running:
ng server –open
The result should look like this:
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+!
Powered by WPeMatico
