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 From Beginn- ing - Part One- ](https://www.c-sharpcorner.com/article/angular-material-from-beginning/ "Angular Material From Beginning - Part One ")
- [Angular Material From Beginning - Part Two ](https://www.c-sharpcorner.com/article/angular-material-from-beginning-part-two2/ "Angular Material From Beginning - Part Two ")
Angular Material provides the following types of Popups modal.
1. Tooltips
2. Dialog
3. Snackbar
4. 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.
```csharp
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.
```html
```
**Step 4**
Now, open the angular-mattooptips.component.ts file and import TooltipPosition,add the following lines.
```csharp
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.
```csharp
import { MatDialogModule } from '@angular/material';
```
**Step 8**
Now, open angular-mat-dialog.component.html and add the following HTML.
```html
{{name}}
Do you wish to Visit Jaipur ?
```
**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.
```csharp
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
```csharp
import { MatDialog, MatDialogConfig } from '@angular/material';
```
And, add the following code in app.component.ts file.
```csharp
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.
```html
```
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.
Join the conversation! Your thoughts help the community grow.