Angular Material From The Beginning

In this article, we will discuss Angular Material Popups and Modal components.

Popups are used to display alerts and notification messages on the top of the current page.

In the previous parts of the series, we discussed basics of Angular material and Stepper component. You can check the previous articles here:

Angular Material provides the following types of Popups modal.

Tooltips
Dialog
Snackbar
Bottom sheet

Tooltips
Angular Material tooltip is a small pop-up box that is visible on mosue hovers or button click on an element. To create an Angular Material tooltip, we use the matTooltip property.

We can change the position of tooltip label. For that, we use the matTooltipPosition property.

Positions:

above : Show label above the element
below : Show label below the element
left : Show label to the left of the element
right : Show label to the right of the element

Step 1
Let’s create a new component by using the following command.

ng g c AngularMattooptips

Step 2
Now, open the app.module.ts file and import the required module for tooltip.

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 { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AngularMatstepperComponent } from './angular-matstepper/angular-matstepper.component';
import { MatStepperModule } from '@angular/material/stepper';
import { MatButtonModule, MatFormFieldModule, MatInputModule } from "@angular/material";
import 'hammerjs';
import { AngularMattooptipsComponent } from './angular-mattooptips/angular-mattooptips.component'
import {MatTooltipModule} from '@angular/material/tooltip';
@NgModule({
  declarations: [
    AppComponent,
    AngularMatstepperComponent,AngularMattooptipsComponent
  ],
  imports: [
    BrowserModule, FormsModule, ReactiveFormsModule,MatTooltipModule,
    AppRoutingModule, BrowserAnimationsModule, MatStepperModule, MatButtonModule, MatFormFieldModule, MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 3

Now, open angular-mattooptips.component.html and add the following HTML.

<div style="padding-top: 20px;padding-left:30px;">
  <button mat-stroked-button color="primary" [matTooltipPosition]="position" matTooltip="Click on Button">
    Button
  </button>
</div>

Step 4
Now, open the angular-mattooptips.component.ts file and import TooltipPosition,add the following lines.

import { Component, OnInit } from '@angular/core';
import { TooltipPosition } from '@angular/material';
@Component({
  selector: 'app-angular-mattooptips',
  templateUrl: './angular-mattooptips.component.html',
  styleUrls: ['./angular-mattooptips.component.css']
})
export class AngularMattooptipsComponent implements OnInit {
  constructor() { }
  position: TooltipPosition = 'before';
  ngOnInit() {
  }
}

Step 5
Now, run the project mouse over on button and check the result.

Dialog:Angular material provide MatDialog module which used to open modal dialogs.

Step 6 Let’s create a component by using the following command.
ng g c AngularMatDialog

Step 7
Now, open the app.module.ts file and import MatDialog module.

import { MatDialogModule } from '@angular/material';

Step 8
Now, open angular-mat-dialog.component.html and add the following HTML.

<h1 mat-dialog-title>{{name}}</h1>
<mat-dialog-content>Do you wish to Visit Jaipur ?</mat-dialog-content>
<mat-dialog-actions>
<button mat-button mat-dialog-close>No</button>
<button mat-button [mat-dialog-close]>Yes</button>
</mat-dialog-actions>

mat-dialog-title: This defines the title of the Dialog that has been applied with the heading elements h1, h2.
mat-dialog-content: contain body of the dialog.
mat-dialog-actions: contain buttons to confirm or close a dialog.

Step 9 Open angular-mat-dialog.component.ts and add the following code.

import { Component, OnInit, Inject } from '@angular/core';
import { MAT_DIALOG_DATA} from '@angular/material/dialog';
export interface DialogData {
  animal: string;
  name: string;
}
@Component({
  selector: 'app-angular-mat-dialog',
  templateUrl: './angular-mat-dialog.component.html',
  styleUrls: ['./angular-mat-dialog.component.css']
})
export class AngularMatDialogComponent {
  name: string;
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
    this.name = data.title;
    }
}

Step 10 Open app.component.ts and import matdialog

import { MatDialog, MatDialogConfig } from '@angular/material';

And, add the following code in app.component.ts file.

import { Component } from '@angular/core';
import { MatDialog, MatDialogConfig } from '@angular/material';
import { AngularMatDialogComponent } from './angular-mat-dialog/angular-mat-dialog.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(public dialog: MatDialog) { }
  openModal() {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.data = {
        title: 'Welcome To Jaipur'
    };
    const dialogRef = this.dialog.open(AngularMatDialogComponent, dialogConfig);
  }
}

Step 11 Add the following HTML in the app.component.html file.

<div style="padding:20px;">
    <button mat-raised-button color="primary" (click)="openModal()">Open Dialog</button>
  </div>

Now, run the code and check result.

Bottom Sheet

Bottom sheet is used to open a panel at the bottom of the screen. To implement a bottom sheet, we need to use the MatBottomSheet service from Angular Material.

Summary In this article, we learned about Angular Material popups and dialogs.

Angular Material From The Beginning - Part Three