How to create custom modal in Angular using Angular Material

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.

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 '[email protected]/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 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Cookies in Angular for Storing user’s Credentials

In this post, I will be explaining about using Cookies in Angular for Storing user’s Credentials

Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch: This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

An Angular Roadmap — The Past, Present, and Future of Angular

✅Interested in being an Angular developer in 2019? ... blog post it's most likely that you've written some code in javaScript in the past.