After following the steps outlined in this tutorial, I successfully created a reusable modal component. However, when trying to personalize it, I encountered an issue where the modal appeared as an empty box and displayed the error
ERROR TypeError: ctx_r1.modalConfig is undefinedThe structure of the modal component is as follows:
Modal component
modal.component.html
modal.component.ts
modal.config.ts
The contents of .config.ts file are as follows:
export interface ModalConfig {
modalTitle: string;
...
}
Below is component B, where I attempted to open a personalized modal:
b.ts file:
import { Component, Injectable, Input, OnInit, TemplateRef, ViewChild } from '@angular/core'
import { ModalConfig } from '@app/.../modal/modal.config';
import { ModalComponent } from '@app/.../modal/modal.component';
@Component({
selector: 'b',
templateUrl: './b.component.html',
standalone: true,
imports: [ ModalComponent ]
})
export class BComponent {
public modalConfig!: ModalConfig;
@ViewChild('deleteConfirmModal') private modalComponent!: ModalComponent;
async openModal() {
this.modalConfig.modalTitle = "Confirm your action";
return await this.modalComponent.open()
}
}
b.html
<modal #deleteConfirmModal [modalConfig]="modalConfig"> </modal>
When trying to assign a value to modalConfig, the modal no longer appears and a similar error is thrown:
ERROR Error: Uncaught (in promise): TypeError: _this.modalConfig is undefined
If anyone has encountered this issue before and knows how to resolve it, your insights would be greatly appreciated.