Problem calling function on another component in Angular

Question

Before i explain my issue here is the background to my setup.

At the heart is the AG Grid and the ag-grid-angular component. On which i build a ag-grid-base Component which handles the basic function like filter paging etc. Then i have a component which is called filter-grid which add's some dynamic setup stuff to the grid like loading column lists etc. Then i use a this component to setup my instances of different grids to display data. One function of the grid is to view and or edit data in a modal form. I implemented an event emitter to let my component which called the dialog to know when it needs to reload the data because of changes.

the data reload function is part my ag-grid-component and i can call it just fine from my filter-grid component but when i try to call a function on the filter-grid from my custom-grid i get a bunch of errors like

BucketGridComponent_Host.ngfactory.js? [sm]:1 ERROR Error: StaticInjectorError(AppModule)[BucketGridComponent -> FilterGridComponent]: StaticInjectorError(Platform: core)[BucketGridComponent -> FilterGridComponent]: NullInjectorError: No provider for FilterGridComponent!

Not sure for what i am missing ..

jornathan · Answer 1 · 2019-12-04T05:30:18.210

I think this is duplicated

NullInjectorError: No provider for AngularFirestore + Can't resolve all parameters for AngularFirestore: ([object Object], ?)

Maybe your BucketGridModule already added at imported at app.module.ts.
So you need to add import and export(both) FilterGridModule to BucketGridModule.component.ts But your FilterGridComponent doesn't have module, you need to add(declarations) that component to BucketGridModule. as below.

BucketGridModule.component.ts

import { FilterGridComponent} from './{I don't know where it is}/FilterGridComponent';

@NgModule({
    imports: [
        ...
        FilterGridComponent
    ],
    export:  [
       ...
       FilterGridComponent
    ],
    declarations: [
        FilterGridComponent
    ],
})

app.component.ts

import { BucketGridModule} from './{I don't know where it is}/BucketGridModule';

@NgModule({
    imports: [
        ...
        BucketGridModule
    ],    
    declarations: [
        FilterGridComponent  //Now I'm not sure need or not.
    ],
})

score 0 · Accepted Answer · answered Nov 23 '19 at 19:39

After some playing around the solution was simpler then i thought. Instead on declaring the filtergrid in the constructor i only did import it

import { FilterGridComponent} from './{I don't know where it is}/FilterGridComponent';

and then create a @ViewChild.

@ViewChild('filterGrid') filterGrid: FilterGridComponent;

After that i could call the relaod function with no issues and errors.

reloadData() {
    this.filterGrid.reload()
}

Problem calling function on another component in Angular

2 Answers2