How to create custom modal in Angular using Angular Material

Angular has come a long way after its version 2, and now with many more libraries and tools to help with the development than ever before. In this article, I will create a demo to make you understand about how we can create custom modal in angular using angular material using Angular-CLI.

Let’s Get Started

Step 1: Create Angular project

ng new angular7-custom-modal

Step 2: Install Angular material and other dependency libraries

npm install --save @angular/material @angular/cdk

Step 3: Create home component

ng g c home

Step 4 : Update home.component.ts file

Open the home.component.ts file and update the below code in it.

 
import { Component , OnInit,Inject } from '@angular/core';
 
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
 
export interface DialogData {
user: 'user A' | 'user B' | 'user C';
}
 
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
 
title = 'Angular 7 Custom Modal';
constructor(public dialog: MatDialog) { }
 
ngOnInit() {
}
 
openDialog() {
this.dialog.open(MainChatModalComponent, {
data: {
user: 'user A'
}
});
}
 
}
 
@Component({
selector: './main-chat-modal',
templateUrl: './main-chat-modal.html',
})
export class MainChatModalComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
}
 

For the simplicity, I am doing everything in very less file, You can see I have created Chat modal component here only. Normally while development we should create this as service so that it can be used at multiple component. But here I am going to make everything in very briefly.

Step 5: Create html file for chat modal

As I told just before that I will go in very brief way, So create a file inside home componet folder named main-chat-modal.html and put the below code in it.

<h1 mat-dialog-title>Chat list</h1>
<div mat-dialog-content>
<mat-dialog-actions>
<button mat-button [mat-dialog-close]="data.user">Close</button>
</mat-dialog-actions>
 
Chat user list:
<ul>
<li>
<span *ngIf="data.user === 'user A'">✓</span> user A
</li>
<li>
<span *ngIf="data.user === 'user B'">✓</span> user B
</li>
<li>
<span *ngIf="data.user === 'user C'">✓</span> user C
</li>
</ul>
</div>

Step 6: Import pre-built theme css file

Import below file in styles.css file placed under src folder.

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

Step 7: Update home.component.html file

Open home.component.html file and put below code inside it

<div style="text-align:center;">
<a mat-button (click)="openDialog()">Open dialog</a>
</div>

Step 8: Update routes

Open app-routing.modal.ts file

const routes: Routes = [ { path: '', component: HomeComponent }];

Step 9: Update app.module.ts file

Open app.module.ts file and put below code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent,MainChatModalComponent } from './home/home.component';
 
@NgModule({
declarations: [
AppComponent,
MainChatModalComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
MatDialogModule,
BrowserAnimationsModule
],
providers: [ {provide: MatDialogRef
}],
entryComponents: [MainChatModalComponent],
 
bootstrap: [AppComponent]
})
export class AppModule { }

Step 10: Run the app

Run the app with ng serve over terminal.

Conclusion

So in this demo, We created a very basic demo to use the** Angular material library** for angular custom modal.

#angular