How to open material modal dialog using modal HTML template and pass some dynamic data to it?

So the use case will be that we have several different options to update some data and all of them are using same modal dialog. We have to pass data for each option to be able to identify which option should be updated inside of modal dialog

 

We will be using setting.component to call modal dialog
so firs lets create a buttons which will trigger function which will open modal dialog in our setting.component.html file:

                    <button mat-button (click)="setAd('ad_home_1')">Set Add 1</button>
<button mat-button (click)="setAd('ad_home_2')">Set Add 1</button>

next inside of setting.component.ts let's inlcude modal component and create setAd method to open it:

                    // import modal dependency and include our modal component: ad-settings
...
import {MatDialog} from '@angular/material';
import {AdSettingsComponent} from '../Modals/ad-settings/ad-settings.component';
...


constructor(
 public dialog: MatDialog
) { }

 

And finally let's create our method to response on button clicks and pass value from button click to modal:

                    setAd(addPosition) {
  this.dialog.open(AdSettingsComponent, {
    width: '250px',
    data: {addPosition: addPosition}
  });
}

 

Next let's create AdSettingsComponent, in Angular CLI we can use shortcut command:

                    ng g c Modals/AdSettings

 

And then inside of AdSettingsComponent we will import MAT_DIALOG_DATA and couple more things:

                    import {Component, Inject, OnInit} from '@angular/core';
import {MatDialogRef} from '@angular/material';
import {MAT_DIALOG_DATA} from '@angular/material';

 

Set the constructor and use our passed data in modal window:

                    constructor(
  public dialogRef: MatDialogRef<AdSettingsComponent>,
  @Inject(MAT_DIALOG_DATA) public data: any
) { }

ngOnInit() {
  console.log('modal dialog opened:'+this.data.addPosition);
}

 

Official documentation can be found here:
https://material.angular.io/components/dialog/api