Angular 9 ng-bootstrap 6.1 Modal component open method not working - angular9

Question

I've written an Angular 9 modal dialog component that I am migrating from bootstrap to ng-bootstrap 6.1. Here's the template:
<ng-template #confirm let-modal tabindex="-1" aria-labelledby="confirmModalTitle">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" [innerHTML]="safeHeader"></h5>
<button type="button" (click)="onCancel()" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [innerHTML]="safeBody">
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="button" (click)="onCancel()" class="btn btn-primary" data-dismiss="modal">No</button>
<button type="button" (click)="onOK()" class="btn btn-secondary btn-danger">Yes</button>
</div>
</div>
</div>
</ng-template>
Here's the code:
import { Component, OnInit, Input, EventEmitter, Output, ViewChild, ElementRef, TemplateRef} from '#angular/core';
import { DomSanitizer, SafeHtml } from '#angular/platform-browser';
import { IqBaseComponent } from '../shared/iq-base.component';
import { ResponsiveState } from 'ngx-responsive';
import { NgbActiveModal, NgbModal } from '#ng-bootstrap/ng-bootstrap';
import { Template } from '#angular/compiler/src/render3/r3_ast';
declare var $: any;
#Component({
selector: 'my-confirm',
templateUrl: './confirm.component.html'
})
export class ConfirmComponent extends IqBaseComponent implements OnInit {
#Input() header: string;
#Input() body: string;
#Output() confirmationResult: EventEmitter<boolean> = new EventEmitter<boolean>();
#ViewChild('confirm', { static: false }) private confirm: TemplateRef<any>;
get safeHeader(): SafeHtml {
return this.domSanitizer.bypassSecurityTrustHtml(this.header);
}
get safeBody(): SafeHtml {
return this.domSanitizer.bypassSecurityTrustHtml(this.body);
}
constructor(private modalService: NgbModal, private domSanitizer: DomSanitizer, private responsiveState: ResponsiveState) {
super(responsiveState);
}
ngOnInit() {
}
show() {
this.modalService.open(confirm, { backdrop: true, size: 'sm', keyboard: true, centered: true });
}
onOK() {
this.modalService.dismissAll();
this.confirmationResult.emit(true);
}
onCancel() {
this.modalService.dismissAll();
this.confirmationResult.emit(false);
}
}
When the show() method is invoked and this.modalService.open(...) is called, I get the following run time exception:
core.js:6189 ERROR Error: Uncaught (in promise): Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property.
Error: ASSERTION ERROR: Type passed in is not ComponentType, it does not have 'ɵcmp' property.
at throwError (core.js:1335) [angular]
at assertComponentType (core.js:2934) [angular]
at ComponentFactoryResolver$1.resolveComponentFactory (core.js:33795) [angular]
at NgbModalStack._createFromComponent (ng-bootstrap.js:6196) [angular]
at NgbModalStack._getContentRef (ng-bootstrap.js:6178) [angular]
at NgbModalStack.open (ng-bootstrap.js:6118) [angular]
at NgbModal.open (ng-bootstrap.js:6290) [angular]
at ConfirmComponent.show (confirm.component.ts:46) [angular]
The component was instantiated in another component like so:
<my-confirm #saveDiscard [header]="'Confirm Discarding Changes'" [body]="'Are you sure you want to discard changes?'"></my-confirm>
and referenced in the code-behind like so:
#ViewChild('saveDiscard', { static: true }) public saveDiscardConfirmer: ConfirmComponent;
...
canDeactivate(): Observable<boolean> {
let retValue: Observable<boolean>;
if (this.myForm.isDirty) {
retValue = this.saveDiscardConfirmer.confirmationResult.asObservable();
this.saveDiscardConfirmer.show();
} else {
retValue = of(true);
}
return retValue;
}
Any ideas on how to fix this?

Answer 1

To make this work, I ended up with an NgbActiveModal - NgbModal combo component:
import { Component, OnInit, Input, EventEmitter, Output, ViewChild, ElementRef, TemplateRef} from '#angular/core';
import { DomSanitizer, SafeHtml } from '#angular/platform-browser';
import { IqBaseComponent } from '../shared/my-base.component';
import { ResponsiveState } from 'ngx-responsive';
import { NgbActiveModal, NgbModal } from '#ng-bootstrap/ng-bootstrap';
#Component({
selector: 'my-confirm-content',
templateUrl: './confirm.component.html'
})
export class ConfirmContentComponent {
#Input() header: string;
#Input() body: string;
get safeHeader(): SafeHtml {
return this.domSanitizer.bypassSecurityTrustHtml(this.header);
}
get safeBody(): SafeHtml {
return this.domSanitizer.bypassSecurityTrustHtml(this.body);
}
constructor(public activeModal: NgbActiveModal, private domSanitizer: DomSanitizer) { }
}
#Component({
selector: 'my-confirm',
template: ''
})
export class ConfirmComponent extends IqBaseComponent implements OnInit {
#Input() header: string;
#Input() body: string;
#Output() confirmationResult: EventEmitter<boolean> = new EventEmitter<boolean>();
#ViewChild('confirm', { static: false }) private confirm: TemplateRef<any>;
constructor(private modalService: NgbModal, private responsiveState: ResponsiveState) {
super(responsiveState);
}
ngOnInit() {
}
async show() {
const modalRef = this.modalService.open(ConfirmContentComponent, { backdrop: true, keyboard: true });
modalRef.componentInstance.header = this.header;
modalRef.componentInstance.body = this.body;
this.confirmationResult.emit(await modalRef.result);
}
}
Where the ./confirm.component.html contains:
<div class="modal-header">
<h5 class="modal-title" [innerHTML]="safeHeader"></h5>
<button type="button" (click)="activeModal.close(false)" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" [innerHTML]="safeBody">
</div>
<div class="modal-footer d-flex justify-content-between">
<button type="button" (click)="activeModal.close(false)" class="btn btn-primary">No</button>
<button type="button" (click)="activeModal.close(true)" class="btn btn-secondary btn-danger">Yes</button>
</div>
and my app.module.ts includes:
entryComponents: [
ConfirmContentComponent
],

Answer 2

Wrap your component with a ng-template, like this:
<ng-template #myContent>
<my-dialog-component></my-dialog-component>
</ng-template>