Adding ModalComponent to sub-header #11031

rucksackdigital created 2 years ago

Running Angular w/ aspnetCore, 10.5.0

I'm having difficulties trying to add a simple modal component into the sub-header module; it seems wherever I make the declaration for my modal module, it's inaccessible to the sub-header. The modal just a trimmed-down version of most of the ModalComponents, showing only a title and localized text string that are passed in.

When I place in any admin/main page's module and call, everything works as expected. It's only in the sub-header where I get the 'Cant bind to X since it isn't a known property'. I am probably missing something incredibly simple...

import { Component, Injector, ViewChild } from '@angular/core';
import { AppComponentBase } from '@shared/common/app-component-base';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { merge as _merge } from 'lodash-es';


@Component({
    selector: 'simpleInfoModal',
    templateUrl: './simple-info-modal.component.html',
})
export class SimpleInfoModalComponent extends AppComponentBase {

    helpText: string;
    modalTitle: string = 'Info';

    @ViewChild('modal', { static: true }) modal: ModalDirective;
    
    constructor(injector: Injector) {
        super(injector);
    }


    show(helpText:string, modalTitle?:string): void {

        this.helpText = helpText;
        if(modalTitle)
            this.modalTitle = modalTitle;

        this.modal.show();
    }

   

    close(): void {
        this.modal.hide();
    }
}

1 Answer(s)