Nowadays everyone is moving to angular and most of them are using moved to angular material instead of bootstrap. Throughout this blog, we will learn about how we are using Angular Material 6. In the previous tutorial, we saw how to use angular with PHP MySQL and the installation of bootstrap.
Now let's see how we can add Angular Material 6 to our Angular application.
Material Design is a design method created by Google in 2014 which will have a set of principles and guidelines for creating UIs including motion (animations) and gestures.
Angular Material 6 is the implementation of Material Design for the Angular 6. Which will offer a set of components and patterns for navigation, forms, buttons, and layouts?
In this tutorial, we will see how to add Material Design to Angular 6 in two ways:
Now we are going with the long way: by following steps manually. This will work for Angular 4, 5, and Angular 6.
In the shorter method by using ng add the command to quickly add Angular Material in the one-step using Angular 6 Schematics. This method only works with the Angular 6+.
Installing Angular Material 6 and Angular CDK
We are moving to the terminal, and need to navigate inside our newly created Angular front-end application and then we need to run the following commands to install Angular Material 6 and Angular 6 CDK
npm install --save @angular/material @angular/cdk
Adding Support for Angular Animations
Some of the Angular Material 6 components we need to use animations so we need to add support for animations in our Angular 6 front-end application for enabling these animations.
Run the following command to install the Angular animations module
npm install --save @angular/animations
Next, we need only need to add this module to our app configuration so we need to open the app.module.ts file then import the BrowserAnimationsModule module and add it to the list of imports in the imports section
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
imports: [
BrowserModule, BrowserAnimationsModule
],
Adding Support for Gestures with HammerJS
Some Angular Material components depend on HammerJS for gestures support so we need to add HammerJS to our application for getting all the features of our components
We can simply move to our terminal and install the library from npm
npm install --save hammerjs
We will then need to import the library in our app starting point
/*...*/
import 'hammerjs';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
Including a Theme
Themes are required to add better styles/colors to Material components used in our application. We can either use a custom theme.
The themes are CSS files. If we need to find all available pre-built themes we can check @angular/material/prebuilt-themes
- · deeppurple-amber.css
- · indigo-pink.css
- · pink-bluegrey.css
- · purple-green.css
So let us use the deeppurple-amber.css theme for our current application. Now open the style.css file and we need to add the following CSS @import
@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
Adding Angular Material 6 with ng-add and Schematics
With the current release of Angular 6, the new ng add command is available which will help us easy to add new items to the project. This command will be useful to the package manager to download new dependencies and invoke corresponding installation scripts. This is making sure that our project is updated with all the dependencies available, configuration changes, and that package-specific initialization code is executed.
In the following we will use the ng add the command to add Angular Material to the created Angular 6 application:
ng add @angular/material
By executing the above command we are installing Angular Material and the corresponding theming into our project. Furthermore, new starter components are registered into ng generate c
Exploring Angular Material Starter Components
With Angular 6 and Angular Material 6, we can now use ng generate to quickly generate Material design components. The following components are available:
· @angular/material:materialDashboard:
This will generate a card-based Material dashboard component
·
- @angular/material:materialTable: This will generate a Material data-table component
- · @angular/material:materialNav: This will generate a Material navigation component with a responsive sidenav.
We can generate these components using the ng generate command as we are seeing in the following examples:
- · ng generate @angular/material:materialNav --name exampleNavbar
- · ng generate @angular/material:materialDashboard --name exampleDashboard
- · ng generate @angular/material:materialTable -- name exampleDatatable
These commands generate boilerplate files for the component and update our application module accordingly as per our usage.
Let us take an example. Open src/app/app.component.html and we need to update it to add a Material
Design navigation bar:
<example-navbar></example-navbar>
This will include the output of the ExampleNavbarComponent in our main application component.
Now, we need to add our links and use the routerLink directive to create navigation links for routing. Open src/app/example-navbar/example-navbar.component.html then we need add the following links:
<mat-nav-list>
<a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
<a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
<a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
<a class="mat-list-item " [routerLink]="'/create-contact'"> Create Contact </a>
<a class="mat-list-item " [routerLink]="'/leads'"> Leads </a>
<a class="mat-list-item " [routerLink]="'/create-lead'"> Create Lead </a>
<a class="mat-list-item" [routerLink]="'/opportunities'"> Opportunities </a>
<a class="mat-list-item " [routerLink]="'/create-opportunity'"> Create Opportunity </a>
</mat-nav-list>
So finally we completed, we are now have updated our Angular 6 front-end application to use Angular Material and updated our navigation bar to use <mat-nav-list>.
Comments
Post a Comment