I have this components structure in app.component.html:
<sidebar-container></sidebar-container>
<router-outlet></router-outlet>
Sidebar container is a component that belongs to another module (sidebar.module). In the ngOnInit of the sidebarContainer component I have a property called "list" that's initiated as an empty array.
export class SidebarContainer implements OnInit {
list: Array<any> = [];
constructor(
private http: HttpClient,
) {}
ngOnInit():void {
this.http.get('url').subscribe(
res => this.list = res
}
The list has this structure:
[{id: 1, name: "Michael"}]
In Sidebar container component child I have only this template (sidebar is a component that has only a div for rendering the list passed as input):
<sidebar [list]="list"></sidebar>
Template of sidebar-component:
<div *ngFor="let l of list">{{l.id}}</div>
Now, when I launch the app and I try to debug data are not updated and I don't see anything. Http request starts when component is just loaded and ngfor seems not work. But when I initialized in the sidebar-component template a value of the array like this:
test -> {{list[0].id}}
<div *ngFor="let l of list">{{l.id}}</div>
I can see both of values.
I can't understand this situation. What am I doing wrong?
changeDetection
toonPush
in the child component – Marek WchangeDetection
is just toonPush
in the sidebar-container-component and in the sidebar-component... – Andrew88