Within a parent component, I am receiving data from an API, which is an Object with various properties. The specific property I want to pass to a child component is called "structure". Using Renderer2, I aim to add a class based on the value of this "structure" property.
However, when attempting to add a class to a div element, it returns an error stating that the div is undefined.
Parent Component :
@Component({
selector: 'dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
dashboardModel;
loadReport(){
this.ApiService('The-Api-Url',300).subscribe((result)=>{
this.dashboardModel = result.dashboardModel;
})
}
///Number 300 is just to show you , it's not important !
Parent Html :
<dashboard-view
[dashboardModel]="dashboardModel"
></dashboard-view>
Child Component :
@Component({
selector: 'dashboard-view',
template: `
<div
#widgetContainer
class="container"
id="widget-view">
</div>
`,
styleUrls: ['./dashboard-view.component.scss']
})
export class DashboardViewComponent implements OnInit {
constructor(private renderer : Renderer2){}
@Input() dashboardModel
@ViewChild ('widgetContainer') widgetContainer :ElementRef
creatStructure(){
this.renderer.addClass(this.widgetContainer.nativeElement , 'container-edit-mode')
}
ngOninit(){
this.creatStructure()
}
}
Despite calling the creatStructure() method in OnInit, AfterViewInit, and even AfterContentInit, it consistently reports that widgetContainer is Undefined.
stackBlitz Sample Code : https://stackblitz.com/edit/angular-ivy-bdpbwx?file=src/app/child/child.component.ts