I show quite a few modals in my application and the way I've decided to do all the somewhat generic ones is through a modal service in typescript. The modal service takes a component as an argument and then opens the model as usual...after the upgrade the content is consistently 'undefined'
My code looks like this
import {
Component,
Injectable,
ViewContainerRef
} from '@angular/core';
import {
BsModalRef,
BsModalService
} from 'ngx-bootstrap/modal';
@Injectable({
providedIn: 'root'
})
export class MapModalService {
bsModalRef: BsModalRef;
config = {
animated: true,
keyboard: true,
backdrop: true,
ignoreBackdropClick: true
};
constructor(
private modalService: BsModalService,
private mapSettingsService: MapSettingsService) {}
displayModal(modalComponent: any, message: any, title: string, iconType: string,
_modalSize: string) {
let modalSize = '';
if ((_modalSize === MapConstants.ModalSettings.ModalSmall) || (_modalSize === '') ||
(_modalSize === undefined)) {
modalSize = 'modal-dialog-centered modal-sm';
} else if (_modalSize === MapConstants.ModalSettings.ModalLarge) {
modalSize = 'modal-lg modal-dialog-centered';
} else if (_modalSize === MapConstants.ModalSettings.ModalMedium) {
modalSize = 'modal-dialog-centered';
}
const initialState = {
message: message,
title: title,
iconSize: 'xx-large',
iconType: iconType,
fontSize: 'x-large'
};
this.bsModalRef = this.modalService.show(modalComponent, Object.assign({
class: modalSize,
initialState
}, this.config));
this.bsModalRef.content.closeBtnName = 'Close';
}
In the example above 'content' is undefined...any ideas on why or how to fix this?
I realized after I posted this question that the "modalComponent" that is being passed in to "displayModal" had a .toString() conversion on it.
This was the problem in that "displayModal" needs an Angular component.