Angular Material Dialog - https://blog.angular-university.io/angular-material-dialog

01.ts

import {MatDialogModule} from "@angular/material";

@NgModule({
    declarations: [
        ...
        CourseDialogComponent
    ],
    imports: [
        ...
        MatDialogModule
    ],
    providers: [
       ...
    ],
    bootstrap: [AppComponent],
    entryComponents: [CourseDialogComponent]
})
export class AppModule {
}

02.ts

import {MatDialog, MatDialogConfig} from "@angular/material";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

    constructor(private dialog: MatDialog) {}

    openDialog() {

        const dialogConfig = new MatDialogConfig();

        dialogConfig.disableClose = true;
        dialogConfig.autoFocus = true;

        this.dialog.open(CourseDialogComponent, dialogConfig);
    }
}

03.ts

dialogConfig.position = {
    'top': '0',
    left: '0'
};

04.html

<h2 mat-dialog-title>{{description}}</h2>

<mat-dialog-content [formGroup]="form">
  
    <mat-form-field>
        <input matInput
                placeholder="Course Description"
               formControlName="description">
    </mat-form-field>
      ....
 
</mat-dialog-content>

<mat-dialog-actions>
    <button class="mat-raised-button"(click)="close()">Close</button>
    <button class="mat-raised-button mat-primary"(click)="save()">Save</button>
</mat-dialog-actions>

05.ts

openDialog() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    dialogConfig.data = {
        id: 1,
        title: 'Angular For Beginners'
    };

    this.dialog.open(CourseDialogComponent, dialogConfig);
}

06.ts

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

@Component({
    selector: 'course-dialog',
    templateUrl: './course-dialog.component.html',
    styleUrls: ['./course-dialog.component.css']
})
export class CourseDialogComponent implements OnInit {

    form: FormGroup;
    description:string;

    constructor(
        private fb: FormBuilder,
        private dialogRef: MatDialogRef<CourseDialogComponent>,
        @Inject(MAT_DIALOG_DATA) data) {

        this.description = data.description;
    }

    ngOnInit() {
        this.form = fb.group({
            description: [description, []],
            ...
        });
    }

    save() {
        this.dialogRef.close(this.form.value);
    }

    close() {
        this.dialogRef.close();
    }
}

    

07.ts

close() {
    this.dialogRef.close();
}

08.ts

save() {
    this.dialogRef.close(this.form.value);
}

09.ts

openDialog() {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;

    dialogConfig.data = {
        id: 1,
        title: 'Angular For Beginners'
    };

    this.dialog.open(CourseDialogComponent, dialogConfig);
    
    const dialogRef = this.dialog.open(CourseDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
        data => console.log("Dialog output:", data)
    );    
}