Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
confirmation modal
import { OverlayRef } from '@angular/cdk/overlay';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subject } from 'rxjs/Subject';
export class ConfirmationModalOverlayRef {
public events = new BehaviorSubject<any>(null);
constructor(private overlayRef: OverlayRef) { }
public close(): void {
this.overlayRef.dispose();
}
}
overlayRef.backdropClick().subscribe((_) => {
if (this.customConfig.hasBackdropClick) {
dialogRef.close();
}
});
export class MyPageComponent implements OnInit, OnDestroy {
public confirmationRef: ConfirmationModalOverlayRef;
constructor(
private confirmationService: ConfirmationModalService
) {}
private openConfirmationModal() {
this.confirmationRef = this.confirmationService.open({
data: {
itemId: this.selectedOption.id,
action: 'delete this section'
}
});
this.confirmationRef.events.pipe(
filter((event) => !!event),
filter((event) => {
return event.type === 'confirm' || event.type === 'close';
}),
take(1) // notice I take only one event per confirmation dialog
).subscribe((events) => {
switch (events.type) {
case 'confirm':
// do logic that required explicit confirmation from the user
break;
case 'close':
this.confirmationRef.close();
break;
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.