I am creating a directive that opens JavaScript's confirm or CDK Dialog based on condition, CDK dialog is optional, and when not used I want it to be tree shaken.
So I used InjectionToken to get the reference of CDK dialog and dialogRef.
/** sample.model.ts **/
export const APP_MAT_DIALOG = new InjectionToken('app-mat-dialog');
export const APP_MAT_DIALOG_REF = new InjectionToken('app-mat-dialog-ref');
/** Consumers module **/
import {Dialog, DialogModule, DialogRef} from '@angular/cdk/dialog';
imports: [DialogModule],
providers: [
{provide: APP_MAT_DIALOG, useExisting: Dialog},
{provide: APP_MAT_DIALOG_REF, useExisting: DialogRef},
],
/** sample-dialog.directive.ts **/
constructor(@Optional() @Inject(APP_MAT_DIALOG) private dialog: any) {}
open() {
//I got the CDK's dialog reference from the consumer's module, this works fine until here,
const dialogRef = this.dialog.open(MyDialogComponent, {});
dialogRef.closed.subscribe((confirmed: any) => {
//handle result
});
}
export class MyDialogComponent {
//I don't get CDK's dialogRef, got an error instead
constructor(@Optional() @Inject(APP_MAT_DIALOG_REF) public dialogRef: any) {}
}
CDK's dialogRef is created dynamically when the dialog is open and the consumer can't pass that?, How do I get a reference to dialogRef?
When consumer pass from module, I get below error
ERROR NullInjectorError: R3InjectorError[InjectionToken app-mat-dialog-ref -> InjectionToken app-mat-dialog-ref -> DialogRef -> DialogRef -> DialogRef]:
NullInjectorError: No provider for DialogRef!