You will learn the basics on how to use dialogs in "Angular". A dialog with a "mat-select" form element will be created.

A component for the dialog is needed. A button which opens the dialog will be created. That button will be added in the main "component" "app.component".
You need to import the following modules in your "app.module.ts" file:

import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatSelectModule } from "@angular/material/select";
import { MatFormFieldModule } from '@angular/material/form-field';

"FormsModule" is needed to map input data with data objects in your "TypeScript" component class. The other modules are needed for the form elements that we will add.

HTML "app component"

<div style="background-color: azure; padding: 10px;">
<span>Dialog Example APP</span>
<br>
</div>

<div style="padding: 10px;">
<br>
<h3>Please click on the button to open the dialog.</h3>
<button mat-raised-button (click)="showDialog()">Open Dialog</button>
<div style="margin-top: 10px" *ngIf="selectedCarsnumber">
<h4>You did select {{selectedCarsnumber}} car(s).</h4>
</div>
</div>

 

 

TypeScript "app component"

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { SelectdialogComponent } from './selectdialog/selectdialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'dialog';
  selectedCarsnumber = 0;
  carsAmountList = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

  constructor(public selectDialog: MatDialog) {

  }

  showDialog(): void {
    const dialogWindow = this.selectDialog.open(SelectdialogComponent, {
      width: '250px',
      data: { carsNumber: this.selectedCarsnumber, carsAmountList: this.carsAmountList }
    });

    dialogWindow.afterOpened().subscribe(() => {
      console.log("The dialog was opened successfully.");
    });

    dialogWindow.afterClosed().subscribe(result => {
      this.selectedCarsnumber = result;
      console.log("The dialog was closed successfully.");
    });
  }
}

 

You need to create the dialog through the method "open()". Which does get the dialog component as the first parameter and setting options as a second parameter.
These setting options are the width of the dialog and data objects that are passed to the dialog "component". The data variable "selectedCarsnumber" is passed which saves default selected value of the "mat-select" in the dialog "component". The data variable "carsAmountList" has an array of car numbers that are displayed as values in the "mat-select".
"afterOpened()": You can add here programming code that should be run after the dialog was opened.
"afterClosed()": You can add here programming code that should be run after the dialog was closed. You get an object (here: "result") retourned from the dialog "component".

Interface class "SelectDialogData.ts"

export interface SelectDialogData {
  carsNumber: Number;
  carsAmountList: Number[];
}

You also have to create an interface class for the data objects that are used in your dialog.

HTML file "Dialog Component: SelectdialogComponent"

<h2>Select cars amount</h2>
<div mat-dialog-content>
  <mat-form-field>
    <mat-label>Number of cars</mat-label>
    <mat-select [(ngModel)]="dialogData.carsNumber">
      <mat-option *ngFor="let amount of dialogData.carsAmountList" [value]="amount">{{amount}}</mat-option>
    </mat-select>
  </mat-form-field>
</div>
<div mat-dialog-actions>
  <button mat-button [mat-dialog-close]="dialogData.carsNumber" cdkFocusInitial>OK</button>
  <button mat-button (click)="onCancelDialog()">Cancel</button>
</div>

You have to create a "div" with the tag "mat-dialog-content" that has the content of your dialog. But also a "div" with the tag "mat-dialog-actions" that has the submit and cancel button of your dialog.
The "DialogData" object "dialogData" has all the data objects, which we have defined when we created this dialog. "*ngFor" is used to go through all array elements of our array. An array element is then referenced with the tag "[value]".
The button tag "[mat-dialog-close]" defines which data variable should be retourned when that button was clicked. You can use this tag on submit or confirmation buttons.
The tag "cdkFocusInitial" marks a button permanently. This can be used for example on submit or confirmation buttons.

 

TypeScript class "Dialog Component: SelectdialogComponent"

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

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

  constructor(public selectCarsnumberDialogRef: MatDialogRef<SelectdialogComponent>, @Inject(MAT_DIALOG_DATA) public dialogData: SelectDialogData) { }

  ngOnInit(): void {
  }

  onCancelDialog() {
    console.log("Dialog - Button cancel clicked");
    this.selectCarsnumberDialogRef.close();
  }

}

 

The "TypeScript" class of the dialog "component" must have a "MatDialogRef" object which references the opened dialog. Our defined data objects are added into the interface object "dialogData" by adding the annotation "@Inject(MAT_DIALOG_DATA)". This allows us to access all the values in the data objects.

Introduction into Angular and the "MEAN stack":
https://ard-site.net/tutorials/web-development/mean-stack-introduction-into-creating-a-mean-stack-app-with-angular-9

More about "Angular Dialog":
https://material.angular.io/components/dialog/api