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...
Deploy Laravel Application To Shared Hosting The Easy and save Way
Laravel advance search filters with optional fields.
Laravel Migrations: Check if Table/Column Already Exists
Connect Multiple databases in the same Laravel project
SEO tool for Laravel Application
Paypal payment gateway integration in Laravel 5.7 step by step
How to Check User online or not in Laravel
How to keep filter data after the click to next button in Laravel pagination
Which is better for web development, Laravel or Flask?
Laravel 5.7 Route Tutorial Step by Step for Beginners