There are 7 types of buttons mentioned on Angular material design official website. The primary button type is raised button type, provided by Angular material design when we talk about high click-through rate (CTR) then there is no best option available option then the raised button in Material design.

To display the most crucial function, we use a floating circular action button in our material design layout. To make the user click on the cards and material dialogs and pop-ups, we go for flat buttons.

Angular Material Design Buttons Types

• Basic Buttons
• Raised Buttons
• Stroked Buttons
• Flat Buttons
• Icon Buttons
• Fab Buttons
• Mini Fab Buttons

Getting Started

To work with Angular Material 8 you must have Node JS, NPM & Angular CLI set up in your system.

ng new angular-material-design-buttons
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS

Go inside project folder.

cd angular-material-design-buttons

Install & Configure Angular Material 8 Library

Run the given below command to install Angular Material

ng add @angular/material

Select any theme among Angular Material Pre-built Themes:

? Choose a prebuilt theme name, or “custom” for a custom theme: Indigo/Pink

❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]

Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]

Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]

Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]

Select Hammer.js (Gesture recognition support) and Angular browser animation dependency.

# Set up HammerJS for gesture recognition? (Y/n) = Y

? Set up browser animations for Angular Material? (Y/n) = Y

Complete Angular material 8 documentation can be found here.

Create Custom Angular Material Module

Create custom Angular material module file to import material UI components. Although this tutorial is about material design buttons, we can also import various angular material UI components in the future.

Go to angular-material.module.ts file and include the following code.

import { NgModule } from ‘@angular/core’;

import { CommonModule } from ‘@angular/common’;

import {

MatButtonModule

} from ‘@angular/material’;
@NgModule({

imports: [

CommonModule,

MatButtonModule

],

exports: [

MatButtonModule

]

})
export class AngularMaterialModule { }

Import Angular Material module, BrowserAnimationsModule and CUSTOM_ELEMENTS_SCHEMA in app.module.ts file.

/* Angular material */

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;

import { AngularMaterialModule } from ‘./angular-material.module’;

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from ‘@angular/core’;

@NgModule({

declarations: […],

imports: [

BrowserAnimationsModule,

AngularMaterialModule,

],

providers: […],

bootstrap: […],

schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class AppModule { }

Create Custom Angular Material Module

There are 3 color theme offered by material design, and those are primary, accent and warn. You can also use disabled class to make angular material button look disabled. Check out below how you can create various type of buttons in Angular using Angular Material design.

Create Angular Material Basic Buttons

Use the below code to create basic material design buttons in primary, accent, warn, disabled and link buttons.

<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>

<a mat-button routerLink=“.”>Link</a>

Create Material Design Raised Buttons

To create Angular Material Raised buttons use the following code.

<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>

Create Stroked Material Design Buttons

To create stroked Material Design Buttons use the given below code.

<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>

<a mat-stroked-button routerLink=“.”>Link</a>

Create Angular Material Flat Button

To create Angular Material Flat Button use the given below code.

<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>

<a mat-flat-button routerLink=“.”>Link</a>

Create Angular Material Icon Buttons

Before we create Angular material icon buttons we need to import MatIconModule service in angular-material.module.ts file, and paste the following code.

import { NgModule } from ‘@angular/core’;

import { CommonModule } from ‘@angular/common’;

import {

MatButtonModule,

MatIconModule

} from ‘@angular/material’;
@NgModule({

imports: [

CommonModule,

MatButtonModule,

MatIconModule

],

exports: [

MatButtonModule,

MatIconModule

]

})
export class AngularMaterialModule { }

You can use the following code in your Angular template to create icon buttons.

<button mat-icon-button>

<mat-icon>favorite</mat-icon>

</button>

<button mat-icon-button color=“primary”>

<mat-icon>favorite</mat-icon>

</button>
<button mat-icon-button color=“accent”>

<mat-icon>favorite</mat-icon>

</button>
<button mat-icon-button color=“warn”>

<mat-icon>favorite</mat-icon>

</button>
<button mat-icon-button disabled>

<mat-icon>favorite</mat-icon>

</button>

Create Angular Material Fab Button

To create Angular Material Fab Button use the given below code.

<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>

<button mat-fab>

<mat-icon>favorite</mat-icon>

</button>

<a mat-fab routerLink=“.”>Link</a>

Create Angular Material Fab Button

To create Angular Material Mini Fab Button use the following code.

<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>

<button mat-mini-fab disabled>Disabled</button>

<button mat-mini-fab>

<mat-icon>favorite</mat-icon>

</button>

<a mat-mini-fab routerLink=“.”>Link</a>

Following will be the output for above material design buttons code.

Finally, we have completed Angular buttons tutorial with Angular Material design.

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others.

This post was originally published here

#angular #angular-js #web-development