Angular component in NgbModal cannot use @viewchild to access methods inside

Question

Im having the following problem, i think its a common case but i havent been able to solve it. I have a small error alert component, which has a method inside to show an error. The way im using it in route components is i use the @viewChild query to access its addNewMessage method and it works.

This time i have an NgbModal from ng-bootstrap, and im opening a component with it. In this component i need to use my error component to show an error, but i cant make the error component load correctly inside the modal, nor i can access its methods with viewChild, im not sure it the issue is with viewChild, or the component not loading due to something being missing in the modules configuration.

This is how i call my modal (NewRecordingFormComponent) in the route component:

const modalRef = this.modalService.open(NewRecordingFormComponent);

This is how i use my error component inside the modal:

<voice-error-alert-component #alertComponent></voice-error-alert-component>

And this is how the component is shown in html once compiled:

<voice-error-alert-component _ngcontent-dhb-c7=""></voice-error-alert-component>

This is the viewChild query im using in NewRecordingFormComponent:

@ViewChild('alertComponent', { static: false }) alertComponent: ErrorAlertComponent;

This query works in route components.

Im have no idea how to make this work, when i look at the html, i should see an ng-for inside it, but i see nothing here, it makes me think the component is not being compiled, like if angular didnt know its a component and just left it as plain html.

I feel this component is not being found in my modal component, maybe because of the way im opening it with the bootstrap modal? is it because im using it on a dynamic component and as its not tied to any route its not being loaded? do i have to load y by hand or declare it by hand so it can be used inside the modal?

What else can i put here so i can get help on this? im pretty new to this version of angular, im searching but i cant find something thats similar to what im seeing, any help is much appreciated!!!

Answer 1

This article gave me the answer: https://angular-2-training-book.rangle.io/modules/feature-modules

The real problem here was that my component was not being loaded in my dynamic component (the modal).

The reason for this is that i have a module file for the app, and then small module files for sections of the app, typically defined by routes.

If you want to use a component inside another component then you need to add it to the .module file for that component. But what if you want a modal (dynamic component) with a child component, you need to declare that child component in app.module.ts, so all components can see it. The way to do it is to create a small .module file for each component that you need to expose in the app to be loaded dynamically like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ErrorAlertComponent } from './error-alert-component.component';

@NgModule({
  imports: [CommonModule],
  declarations: [
    ErrorAlertComponent
  ],
  providers: [],
  exports: [ErrorAlertComponent]
})
export class ErrorAlertModule {}

Then import ErrorAlertModule into a higher module in your app and thats it, it will work then!

Feel free to ask for any clarification, thanks to @mohammad omar for the help!