-1

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!!!

Toddy
  • 333
  • 1
  • 15

2 Answers2

0

Try to log the viewchild variable in ngAfterViewInit (console.log(alertComponent);)

please reply the result

Mohammad omar
  • 91
  • 2
  • Hi! sure, i just logged it and i get: ```ElementRef {nativeElement: voice-error-alert-component}``` ```nativeElement: voice-error-alert-component``` I get a native element with the html reference inside, like a jquery object, but i cant see the methods – Toddy Mar 31 '20 at 20:38
  • So your problem is that the error component is not opening in the modal or you can access the method inside the component? – Mohammad omar Mar 31 '20 at 20:43
  • Have you tried to add the components to the entrycomponents in your module? – Mohammad omar Mar 31 '20 at 20:46
  • the problem is that i cant access the methods inside the child component in the modal, and what i found is that the component appears in the html as if it wasnt compiled. I tried adding it to entry components already, its there as of now, but nothing seems to work – Toddy Mar 31 '20 at 20:56
  • are you importing the NgbModule like this ** NgbModule.forRoot()**? – Mohammad omar Mar 31 '20 at 20:59
-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!

Toddy
  • 333
  • 1
  • 15