0

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.

Clams
  • 61
  • 1
  • 11
  • `this.homeComponent.loadProduct(this.familyProductSelected)` how did you initialise homeComponent in header component? – Kshitij Jan 25 '21 at 15:19
  • Is there a Module that declare HeaderComponent ? Is there a module that Declare HomeComponent and import HeaderModule ? – Marco Jan 25 '21 at 15:27
  • @Kshitij I do it on the costructor of header.component.ts public homeComponent: HomeComponent, – Clams Jan 25 '21 at 15:29
  • @Marco yes. the only thing that is not working is the view of the table in "Home-component". Even though the List "stocks" is being updated I can't see the changes in the view. – Clams Jan 25 '21 at 15:33
  • Could you put your code to Stackblitz? So that we can take a look. @Clams – Kshitij Jan 25 '21 at 19:23
  • @Kshitij https://stackblitz.com/edit/angular-ivy-yhmgkc?file=src/app/app.component.ts – Clams Jan 25 '21 at 23:21
  • @Kshitij https://stackblitz.com/edit/angular-ivy-yhmgkc?file=src/app/home/home.component.ts you can check at home-component (Table at ln39), Header-Component onChange method (ln 143) "loadProduct" method in Home-Component (at ln 32) – Clams Jan 25 '21 at 23:43
  • `providers: [HomeComponent,AppComponent]` should be `exports: [HomeComponent,AppComponent]` as they are not services. I couldn't run your code as there are few missing files – Kshitij Jan 26 '21 at 03:59
  • if I don't declare it as providers I have an error. NullInjectorError: StaticInjectorError(AppModule)[HeaderComponent -> HomeComponent]: if you need to run the code I would need to give you the front-end, backend(java spring project) and database(MySQL). – Clams Jan 26 '21 at 10:56

2 Answers2

0

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

Shivansh Seth
  • 311
  • 1
  • 8
  • The nullInjectorError is when I try to add ChangeDetectorRef on Home-Component. without the ChangeDetectorRef, all the code is working fine, the list is updating correctly, but the view (table in the HTML) is not updating. on my app.module.ts I have all the components added to @NgModule declarations already – Clams Jan 25 '21 at 15:53
0

You can use the Service approach to send data between components, which is explained in the following post:

How to communicate between component in Angular?

And if you want to re-render the view for your HomeComponent manually, use ChangeDetectorRef

danyPasillas
  • 156
  • 5
  • The problem is not with the methods, but with the re-render as you state. but when I try to use ChangeDetectorRef, as I explain at the end of the post, I'm getting an error NullInjectorError, I guess this is because Home-component belong to – Clams Jan 25 '21 at 16:48
  • You could try calling the ChangeDetectorRef method as in the HomeComponent after finishing the statement, as in your AppComponent as a validation test. Maybe, creating a utils method that contains the ChangeDetectorRef in order to achieve DRY. Also try to use another approach. – danyPasillas Jan 25 '21 at 17:24