<mat-button> in Angular material

25 Nov, 2020
Angular Material is a UI component library that is developed by the Angular team to build design components for desktop and mobile web applications. 
In order to use it, we need to have angular installed in our project, after having it you can enter the below command and can download it.
Installation syntax:
ng add @angular/material

Types of Buttons in Angular material: Buttons present in angular material are called as <mat-button>. They are many types of mat-buttons available in angular material, they are:
Button Name
The tag used for the buttons
Explanation
 Basic Buttons
<mat-button>
Raised Buttons
<mat-raised-button>
 Stroked buttons
<mat-stroked-button>
Flat Buttons
<mat-flat-button>
Fab Buttons
<mat-fab>
Mini Fab Buttons
<mat-mini-fab>
Approach:
First, install the angular material using the above-mentioned command.
After completing the installation, Import ‘MatButtonModule’ from ‘@angular/material/button’ in the app.module.ts file.
Then using the above-mentioned tags in the table code all types of buttons.
If we want to change the theme then we can change it by using the color property. In angular we have 3 themes, they are primary, accent, and warn.
Once done with the above steps then serve or start the project.
Code Implementation: In this example, we will implement all types of <mat-button> in angular.
app.module.ts:
Javascript
import { NgModule } from '@angular/core';import { BrowserModule } from '@angular/platform-browser';import { FormsModule } from '@angular/forms';  import { AppComponent } from './app.component';import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import {MatButtonModule} from '@angular/material/button';  @NgModule({  imports:      [ BrowserModule,                   FormsModule,                   BrowserAnimationsModule,                   MatButtonModule ],  declarations: [ AppComponent ],  bootstrap:    [ AppComponent ]})export class AppModule { }
app.component.html:
HTML
<h5>Basic Buttons</h5><div>  <button mat-button>Basic</button>  <button mat-button color="primary">Primary</button>  <button mat-button color="accent">Accent</button>  <button mat-button color="warn">Warn</button>  <button mat-button disabled>Disabled</button></div>  <h5>Raised Buttons</h5><div>  <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></div>  <h5>Stroked Buttons</h5><div>  <button mat-stroked-button>Basic</button>  <button mat-stroked-button color="primary">Primary</button>  <button mat-stroked-button color="accent">Accent</button>  <button mat-stroked-button color="warn">Warn</button>  <button mat-stroked-button disabled>Disabled</button></div>  <h5>Flat Buttons</h5><div>  <button mat-flat-button>Basic</button>  <button mat-flat-button color="primary">Primary</button>  <button mat-flat-button color="accent">Accent</button>  <button mat-flat-button color="warn">Warn</button>  <button mat-flat-button disabled>Disabled</button></div>  <h5>Fab Buttons</h5><div>  <button mat-fab>Basic</button>  <button mat-fab color="primary">Primary</button>  <button mat-fab color="accent">Accent</button>  <button mat-fab color="warn">Warn</button>  <button mat-fab disabled>Disabled</button></div>  <h5>Mini Fab Buttons</h5><div>  <button mat-mini-fab>Basic</button>  <button mat-mini-fab color="primary">Primary</button>  <button mat-mini-fab color="accent">Accent</button>  <button mat-mini-fab color="warn">Warn</button></div>
Output: 
 
AngularJS-Misc
Picked
AngularJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.