Angular7 Custom Modal Using Angular Material Tutorial

    Apr 26, 2019       by Pankaj Kumar
angular7-material-modal.jpg

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'">&#10003;</span> user A
</li>
<li>
<span *ngIf="data.user === 'user B'">&#10003;</span> user B
</li>
<li>
<span *ngIf="data.user === 'user C'">&#10003;</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 the angular custom modal. For reading more about angular material modal click here

 

That’s all for now. Thank you for reading and I hope this demo will be very helpful to understand how to use angular material for custom modal.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share it with your friends.

Thanks!

You can download complete code from here. Download Code

angular7 material

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS