How to Use Angular Material in Angular 7


  • Brijpal Sharma

    February 09th, 2019 , Posted On:- Web Development

    angularjs angular


In this post, we learn how to use angular material in angular 7. we start with scratch step by step.

.Angular Materials is a UI component for the Angular JS framework. Angular Material help to create attractive, consistent and functional web pages and also help to create modern web design principles like lightweight, device independence.  

how to use angular material in angular 7

Step:1 Create a new Angular 7 application

To create a new fresh angular project run this following command. Here we also install routing and style package.

ng new material-ng --routing --style=scss

 

Step: 2 Install Angular Material and Dependencies

After a successful install, a new project now, install Angular Material and some other dependencies like animation and  _________ using 

Step:1 Install Angular /material

npm i --save @angular/material @angular/cdk

 

Step:2 Install Angular Animation

npm i --save @angular/animations

 

Step:3 Install Hammer JS

npm i --save hammerjs

 

Step: 3 Import files

Import some files.

src/main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// import hammer file
import 'hammerjs';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

And also import the browser animation module. and also add in imports array.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Step: 4 Create a typescript file 

Now, time to create a simple typescript file in src/app/material.ts 

material.ts

import { MatButtonModule, MatCheckboxModule } from '@angular/material';
import { NgModule } from '@angular/core';


@NgModule({
  imports: [ MatButtonModule, MatCheckboxModule ],
  exports: [ MatButtonModule, MatCheckboxModule ]
})

export class MaterialModule {

}

Here we add two modules Button and Checkbox module, add into then import and export and export a class MaterialModule. if we wanna add more component of angular Material we can it's at first line in the material.ts.

Now import this MaterialModule into  app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// import this new file
import { MaterialModule } from './material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MaterialModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

Step:5 Include a theme

Angular Material provides us with four themes.

  • deeppurple-amber.css

  • indigo-pink.css

  • pink-bluegrey.css

  • purple-green.css

Choose one theme and include into style.scss

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

 

Step:6 Now add a button component

Now, all setup is completed we can use a button and checkbox component. if you want more add then into material.ts.

app.component.html


<h3>Raised Buttons</h3>
<div class="example-button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
  <a mat-raised-button routerLink=".">Link</a>
</div>
<router-outlet></router-outlet>

 

Now, go to this link. and see the application.

How to Use Angular Material in Angular 7

So, finally, we completed tutorial How to Use Angular Material in Angular 7.

Conclusion:

We install a new Angular 7 project and install the Angular Material package and their dependencies. We use the button and checkbox component of Angular Material.


About Author
  • user profile
    Brijpal Sharma

    brijpalsharma99@gmail.com, January 29th, 2018

    Hi, I am a web developer, I working on Laravel and CodeIgniter framework, I love to share knowledge and tutorials so I here...


0 Comment


You must be logged in to post a comment.


You may also be interested in...
Laravel 5.7 Route Tutorial Step by Step for Beginners
10 Difference Between React.js and React Native
How to Use Angular Material in Angular 7
Laravel 5.7 Passport API Authentication With Example
Create a Forum in Laravel 5.8 Using Chatter
How to Install Python on Windows Pycharm IDE
How to use Charts In Laravel 5.7 Using Charts Package
MEVN Stack Tutorial From Scratch for the beginner
Login with Google in Laravel 5.7
Prevent Block Multiple Logins Of Same Credentials in Laravel 5.7