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

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

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

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc

How to Upgrade Angular 8 To Angular 9

Angular is currently the most popular JavaScript framework and is used by several expert developers when developing single-page applications or powerful web apps. It has become quite crucial for the developers of Angular to add more features to the framework and fix the bugs . Let's learn how to upgrade Angular 8 to Angular 9 using CLI.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica

Angular Workspace: No Application for You!

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail

How to Build an Angular Application with Angular CLI

How to set up the Angular CLI and generate a Trivial App