How can I overwrite a DialogService in angular kendo for the Open and Close methods?

Question

I want to intercept the open and close events to put validation logics but that at the level of all dialogs, so the most ideal solution is to overwrite the DialogService

Answer 1

In some cases it is good to capture opening and closing events in systems that are too large not to refactor every instance of a project.

The solution is in the next URL :

https://stackblitz.com/edit/angular-98yhlh-b7hiyf?file=src%2Fapp%2Fapp.component.ts,node_modules%2F%40progress%2Fkendo-angular-dialog%2Fdialog%2Fdialog.service.d.ts

import { Component, ComponentRef, Injectable } from '@angular/core';
import {
  DialogService,
  DialogRef,
  DialogCloseResult,
} from '@progress/kendo-angular-dialog';
import { DialogResult } from '@progress/kendo-angular-dialog/dialog/models/dialog-result';
import { DialogSettings } from '@progress/kendo-angular-dialog/dialog/models/dialog-settings';
import { DialogComponent } from '@progress/kendo-angular-dialog/main';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
      <div class="example-config" *ngIf="result">
        Dialog result: {{ result }}
      </div>
      <button kendoButton (click)="showConfirmation()">Please confirm</button>
    </div>

    <div kendoDialogContainer></div>
  `,
})
export class AppComponent {
  constructor(private dialogService: MyDialogService) {}

  public result;

  public showConfirmation(): void {
    const dialog: MyDialogRef = this.dialogService.open({
      title: 'Please confirm',
      content: 'Are you sure?',
      actions: [{ text: 'No' }, { text: 'Yes', themeColor: 'primary' }],
      width: 450,
      height: 200,
      minWidth: 250,
    });

    dialog.result.subscribe((result) => {
      if (result instanceof DialogCloseResult) {
        //console.log('close');
      } else {
       // console.log('action', result);
      }
      this.result = JSON.stringify(result);
    });
  }
}

@Injectable({ providedIn: 'root' })
export class MyDialogService extends DialogService {
  open(options: DialogSettings): MyDialogRef {
    console.log('is open');
    let dialogOpen  = super.open(options)
    let mydialogref:MyDialogRef = new MyDialogRef(dialogOpen.close,dialogOpen.content,dialogOpen.dialog,dialogOpen.result);
    return mydialogref;
  }
}

export class MyDialogRef implements DialogRef {
  close: Function;
  content: ComponentRef<any>;
  dialog: ComponentRef<DialogComponent>;
  private _result: Observable<DialogResult>;

  constructor(close: Function,
              content: ComponentRef<any>,
              dialog: ComponentRef<DialogComponent>,
              result: Observable<DialogResult>) {
    this.close = close;
    this.content = content;
    this.dialog = dialog;
    this._result = result;
  }


  get result(): Observable<DialogResult> {
    return this._result.pipe(map(r=>{
      console.log("return")
      return r;
    }));
  }

  set result(value: Observable<DialogResult>) {
    this._result = value;
  }
}