Angular6MaterialAngular

Open Modal Popup in Angular 6 with AngularMaterial

Open Modal Popup in Angular 6 with AngularMaterial - The Rich Post

Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Open Modal Popup in Angular 6 with AngularMaterial.

Angular Material is getting more popularity day by day because with the help of Angular Material, we can build angular app more attractive and well designing.

I am sharing the code for modal popup and hope this helps.

Here is the working modal popup picture:

angular6-modalpopup

Here are the following steps to open modal popup in Angular 6:

1. First you need to run below command into your terminal to include angular material into your angular 6 app:
npm install --save @angular/material @angular/cdk @angular/animations
2. After that, please add below code into your app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent, DialogContentExampleDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule } from "@angular/material";

@NgModule({
  declarations: [
    AppComponent, DialogContentExampleDialog
  ],
  imports: [
    BrowserModule,
  BrowserAnimationsModule,
  MatDialogModule,
  
  ],
  entryComponents: [AppComponent, DialogContentExampleDialog],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
 3. After that, please add below code into your app.component.ts file:
import {Component} from '@angular/core';
import {MatDialog} from '@angular/material';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(public dialog: MatDialog) {
  }
  
  openDialog() {
    const dialogRef = this.dialog.open(DialogContentExampleDialog);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
  
  title = 'my-angular-app';
  
}
@Component({
  selector: 'dialog-content-example-dialog',
  templateUrl: 'dialog-content-example-dialog.html',
})
export class DialogContentExampleDialog {}
 4. After that, please add below code into your app.component.html file:
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <button mat-button (click)="openDialog()">Open dialog</button>
</div>
 5. After that, please add make new file named dialog-content-example-dialog.html into your app folder and add below code inside it:
<h2 mat-dialog-title>Modal PopUP</h2>
<mat-dialog-content class="mat-typography">
  <h3>The Rich Post</h3>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Cancel</button>
</mat-dialog-actions>

 And you are done, If you have any query related to this post, then ask questions or comment below.

 

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

Positive SSL