python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 7, Interview Questions Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language

Angular 4 Open Dialog Box On Click - Modal Window/Dialog Box

In this article, I will cover how to implement Modal Window/Dialog Box in Angular 4 using the “angular/material” and TypeScript.

What Is Angular dialog? A dialog is opened after clicked on open method with the component class. We are using the MatDialogRef provides is used to handle the opened dialog box and also for close the dialog box.

Syntax -
let dialogRef = dialog.open(UserComponent, {
    height: '300px',
    width: '400px',
});


The example in detail as given below-
import {Component, Inject} from '@angular/core';
import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'mydialog',
  templateUrl: 'mydialog.html'
})
export class DialogExample {
  constructor(public dialog: MatDialog) {}

  openUserDialog() {
    this.dialog.open(UserDialog, {
        height:'400px',
        width:'400px'
    });
  }
}


And
@Component({.... })
export class UserDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any) {
     
  }
}


And
<button md-button (click)="openUserDialog()">Open dialog</button>


Result looks like - https://embed.plnkr.co/XO7oPs/


I hope you are enjoying with this post! Please share with you friends. Thank you!!
ANIL SINGH

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions