Open html page in modal pop up window screen in Angular 2

Open html page in modal pop  up window screen in Angular 2

1. Create a parent component Parent.component and its html Parent.component.html page.
2. Create a parent component Child.component and its html Child.component.html page.

1. Import import { MatDialog } from '@angular/material' packages in your parent component.

Below is sample code.

Parent Component

import { MatDialog } from '@angular/material'

@Component({

    selector: 'parent',

    templateUrl: '../UI/Parent.component.html' + '

})

export class ParentComponent {

constructor( public dialog: MatDialog) {

   }

OpenModalPopup() {

        //open the dialog

        let dialogRef = this.dialog.open(ChildComponent, {

            height: '500px',

            width: '60%',

        });

dialogRef.afterClosed().subscribe(result => {

       //read the response selected in the pop up windows

  });

  }

}

Parent Component Html

<h1 >Welcome To Parent Page</h1>

<button type="submit" id="Submit" class="btn btn-primary" aria-label="Submit" (click)=" OpenModalPopup();">Open Modal Pop Up</button>

Child Component

@Component({

    selector: 'experience-Association',

    templateUrl: '../UI/Child.component.html' + '

})

export class ChildComponent {

constructor(public dialogRef: MatDialogRef<ChildComponent>,

        @Inject(MAT_DIALOG_DATA) public data: any) { 

    }

Close(): void {

        this.dialogRef.close();

    }

}

Child Component HTML

<h1 >Welcome To Child Page</h1>

<button type="submit" id="Submit" class="btn btn-primary" aria-label="Submit" (click)=" Close();">Close Modal Pop Up</button>