Modal / Dialog

<button (click)="onClickOrderDialog($event)" />

public onClickOrderDialog(event: Event): void {
    event.preventDefault();
    const dialogRef = this._dialogService.open(DialogComponent);
    dialogRef.afterClosed$().subscribe(() => {});
    this._cdr.markForCheck();
}

export class OrderingDialogComponent implements OnInit, OnDestroy {
  private readonly _deviceService = inject(DeviceService);
  private readonly _cdr = inject(ChangeDetectorRef);
  private readonly _destroy$ = new Subject<void>();
  public isMobile: boolean = false;
  public data: string;
  public FieldType = FieldType;

  public constructor(
    @Inject(DIALOG_DATA) dialogData: string,
    private readonly _dialogRef: DialogRef<unknown>
  ) {
    this.data = dialogData;
  }

  public ngOnInit(): void {
    this._deviceService.isMobileObs$.pipe(takeUntil(this._destroy$)).subscribe((isMobile) => {
      this.isMobile = isMobile;
      this._cdr.markForCheck();
    });
  }

  public ngOnDestroy(): void {
    this._destroy$.next();
    this._destroy$.complete();
  }

  public onClose(): void {
    if (this._dialogRef) {
      this._dialogRef.close(null);
    }
  }
}