I am attempting to change a css class by targeting a div with a template variable within mat-sidenav-content. I have tried using both @ViewChild and @ContentChild but neither of them is able to retrieve the reference of the specified div at runtime. Below you will find the simplified code snippet.
<mat-sidenav-container>
<mat-sidenav opened="true" mode="side" #sidenav>
<-- navigation content here -->
</mat-sidenav>
<mat-sidenav-content class="content-wrapper">
<div class="test" #myDiv>test</div>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
Below is the code snippet from my controller class:
export class MenuControllerComponent
implements AfterContentInit, AfterViewInit
{
@ViewChild('myDiv') myChildDiv!: any;
@ContentChild('myDiv', { static: false }) myContentDiv: any;
constructor(
private responsive: BreakpointObserver,
private navigationService: NavigationService
) {}
ngAfterViewInit(): void {
console.log(this.myChildDiv); // logs undefined
}
ngAfterContentInit(): void {
console.log(this.myContentDiv); // logs undefined
}
}