How to Add Angular Material 13 Buttons in Angular Component

In this tutorial, we will show you how to add or create buttons in the angular app using the angular material button component.

Buttons are added generally on the user interface layout, and it allows users to take action with a single click.

The button simply provides control to the users and allows users to communicate with the website with just a single click. When someone clicks on the button, a certain event occurs that helps the user to complete a certain task.

We will create diffrent types of buttons using the angular material button attribute.

Attribute Description
mat-button Rectangular text button w/ no elevation
mat-raised-button Rectangular contained button w/ elevation
mat-flat-button Rectangular contained button w/ no elevation
mat-stroked-button Rectangular outlined button w/ no elevation
mat-icon-button Circular button with a transparent background, meant to contain an icon
mat-fab Circular button w/ elevation, defaults to theme’s accent color
mat-mini-fab Same as mat-fab but smaller

Angular Material Various Buttons Example

  • Step 1: Build New Angular App
  • Step 2: Add Material Package
  • Step 3: Create Material Modules File
  • Step 4: Material Basic Button Example
  • Step 5: Material Raised Button Example
  • Step 6: Material Stroked Button Example
  • Step 7: Material Flat Button Example
  • Step 8: Material Icon Button Example
  • Step 9: Material Fab Button Example
  • Step 10: View App in Browser

Build New Angular App

Angular CLI is required to create a new angular app, ensure that you install the tool using given command.

npm install -g @angular/cli

Type the following command on the terminal, press enter to install the new app.

ng new ng-material-demo

Move inside the angular application’s folder.

cd ng-material-demo

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Add Material Package

In this step, we will be using the suggested command to add the angular material library in angular project.

ng add @angular/material

To set up the material library, you have to select the given options:

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Head over to src/ folder and look for styles.scss file further add the material design css link in this file:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Create Material Modules File

We will separately create MatButtonModule along with other material modules, therefore create src/ material.module.ts file and insert the following code inside this file.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

Now, you need to add or import MaterialModule, CUSTOM_ELEMENTS_SCHEMA, FormsModule, and ReactiveFormsModule modules within the app/app.module.ts file.

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

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

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

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Material Basic Button Example

In the angular HTML template, define the button directive, pass the mat-button directive, and set the color of the button using a color attribute to use the basic material button.

<div class="example-button-row">
  <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>
  <a mat-button routerLink=".">Link</a>
</div>

Material Raised Button Example

The material offers mat-raised-button property; add this property to create the raised style button in angular.

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

Material Stroked Button Example

Stroked button style is such, where color is not full-filled in button block only the text and border is colored, use the mat-stroked-button property.

<div class="example-button-row">
  <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>
</div>

Material Flat Button Example

Flat design buttons are elegant and straightforward, and you can create flat buttons using the mat-flat-button attribute.

<div class="example-button-row">
  <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>
</div>

Material Icon Button Example

Icons button are usually made using the icon and always has a diffrent dimension due to their design variety; use the mat-icon-button property.

<div class="example-button-row">
  <button mat-icon-button aria-label="Example icon-button with a heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
</div>

Material Fab Button Example

Fab buttons are ideally round buttons, and you can create these cool buttons using the mat-fab property.

<div class="example-button-row">
  <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 aria-label="Example icon-button with a heart icon">
    <mat-icon>favorite</mat-icon>
  </button>
  <a mat-fab routerLink=".">Link</a>
</div>

View App in Browser

We need to start the angular app to check it on the browser and run the command to initiate the app server.

ng serve

Your app will open with the given url:

http://localhost:4200

How to Add Angular Material 13 Buttons in Angular Component