Open a Material DialogRef with CSS positioning, injection of MAT_DIALOG_DATA, and pass dialog data in caller

Angular Material Dialog 

 Button to open dialog:

Dialog data from parent / edit city:

Change visible in parent component:

1. Parent Component - HTML

<div style="height: 800px">

    <div style="height: 200px" fxLayout="row" fxLayoutAlign="center center">

        <div fxLayout="column" fxLayoutAlign="center center">

            <p>User Name: {{userName}}</p>

            <p>User City: {{userCity}}</p>

            <button (click)="openMatDialog()" mat-button color="primary">Update User's town</button>

        </div>

    </div>

</div>

2. Parent Component - TS

import {Component, OnInit} from '@angular/core';

import {MatDialog} from '@angular/material/dialog';
import {TestDialogCompComponent} from 'app/home/test-dialog-comp/test-dialog-comp.component';
@Component({
  selector: 'jhi-test-comp',
  templateUrl: './test-comp.component.html',
  styleUrls: ['./test-comp.component.scss']
})
export class TestCompComponent implements OnInit {
  userName = 'Peter';
  userCity = 'Athens';
  constructor(public dialog: MatDialog) { }
  ngOnInit() {}
  openMatDialog(): void {
    const dialogRef = this.dialog.open(TestDialogCompComponent, {
      position: {bottom: '100px'},
      data: { userName: this.userName, userCity: this.userCity }
    });
    dialogRef.afterClosed().subscribe(result => {
      this.userCity = result;
    });
  }
}

3. Dialog Component - HTML

<h2 mat-dialog-title>Dialog</h2>
<mat-dialog-content class="text">
    <table>
        <tr>Name : {{data.userName}}</tr>
    </table>
    City:
    <mat-form-field>
        <input matInput [(ngModel)]="data.userCity">
    </mat-form-field>
</mat-dialog-content>
<mat-dialog-actions style="text-align: center">
    <button mat-raised-button [mat-dialog-close]="data.userCity" color="primary">Save</button>
</mat-dialog-actions>

4. Dialog Component - TS

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

import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';

@Component({

  selector: 'jhi-test-dialog-comp',

  templateUrl: './test-dialog-comp.component.html',

  styleUrls: ['./test-dialog-comp.component.scss']

})

export class TestDialogCompComponent implements OnInit {

  constructor(

    public dialogRef: MatDialogRef<TestDialogCompComponent>,

    @Inject(MAT_DIALOG_DATA) public data: any) {

  }

  ngOnInit() {}

  onNoClick(): void {

    this.dialogRef.close();

  }

}

5. Dialog Component - CSS

.mat-dialog-content {
  height: 70%;
  width: 100%;
}

6. App.module.ts

Add parent and dialog component to @NgModule entryComponents

Angular - Redirect to Component with pop-up Material Dialog

Show Component with MatDialog service as popup

Prerequisites:

@angular/material v8.2.3

1. Redirection Service - TS

...

  constructor(public dialog: MatDialog, private location: PlatformLocation, public translate: TranslateService) {
    this.location.onPopState(() => {
      const length = this.dialog.openDialogs.length;
      if (!this.ignorePop) {
        if (length > 0) {
          this.dialog.openDialogs[length - 1].componentInstance.closePopup();
        }
      } else {
        this.ignorePop = false;
      }
    });
  }

// Method to open component 
  open(title: string, componentType: string, options?: { [key: string]: any }): void {
    let translate = this.translate.instant(title);
    if (translate.includes('[' + title + ']')) {
      translate = title;
    }
    const dialogRef = this.dialog.open(RedirectionDialogComponent, {
      data: { title: translate, component: getComponent(componentType)},
      maxWidth: '90%',
      width: '90%',
      height: 98.5 - this.dialog.openDialogs.length * 1.5 + '%',
      hasBackdrop: false,   
     closeOnNavigation: false,
    });


  }
.......

2. Redirection Dialog Component - TS

export interface DialogData {

  title: string;

  component: Type<any>;

  parameters: { [key: string]: any };

}

@Component({

  selector: 'redirection-dialog',

  templateUrl: './redirection-dialog.component.html',

  styleUrls: ['./redirection-dialog.component.scss']

})

export class RedirectionDialogComponent implements OnInit {

  @ViewChild('contentComponent', { static: true, read: ViewContainerRef }) contentComponent!: ViewContainerRef;

  constructor(

    public dialogRef: MatDialogRef<RedirectionDialogComponent >,

    @Inject(MAT_DIALOG_DATA) public data: DialogData,

    public dialog: MatDialog,

    private componentFactoryResolver: ComponentFactoryResolver,

    private el: ElementRef

  ) {}

  ngOnInit(): void {

    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.data.component);

    this.contentComponent.clear();

    const compRef = this.contentComponent.createComponent(componentFactory);

  }

}

3. Redirection Dialog Component - HTML

<div>

    <h1> {{data.title}} </h1>

<mat-dialog-content>

    <div #contentComponent></div>

</mat-dialog-content>

</div>

3.1 Example of use:

In your code:

...

this.redirectionService.open('Your component title', 'YourComponent');

...