angular - *ngFor no updating list on router-outlet

Question

I have this structure on appComponent:

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>

on the <router-outlet> ,my main component('/'), is the Home-component.

I have a table in Home-component

<div class="col-md-3 col-sm-3" *ngFor="let stock of stocks">

and I want to change the table regarding my selector in the Header.

<select class="input-select" [(ngModel)]="familyProductSelected" (change)="onChange()" 
                             [ngModelOptions]="{standalone: true}" [value]="familyProductSelected">

I have an onChange() method. This method is called from header referencing a Home Component method.

onChange() {
 this.homeComponent.loadProduct(this.familyProductSelected);
}

This method, which is updating the stocks list is working fine, and the array is updated correctly, but the view is not updating it.

I tried with this.stocks = [...this.stocks];, trackBy, this.stocks= Object.assign({}, this.stocks); and with ChangeDetectorRef. non of these worked for me. On the last one, I'm getting NullInjectorError

main.ts:13 NullInjectorError: StaticInjectorError(AppModule)[HomeComponent -> HeaderComponent]: 
StaticInjectorError(Platform: core)[HomeComponent -> HeaderComponent]: 
NullInjectorError: No provider for HeaderComponent!

How can I fix this? This is my first question for Angular, please let me know if I need to add more information.

question from:https://stackoverflow.com/questions/65887024/ngfor-no-updating-list-on-router-outlet

Answer 1

Import HeaderComponent in your app.module.ts & then in the import array in @ngModule Add below bold code into your app.module.ts

**import { HeaderComponent} from 'your_path_to_componenet'**;

@NgModule({ declarations: [**HeaderComponent**] }) export class AppModule{ }

NullInjectorError will resolve & your code should work fine