I'm facing a dilemma. I have the following code in my app.component.html file:
<mat-sidenav-container class="sidenav-container">
<app-sidenav></app-sidenav>
<mat-sidenav-content>
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
When implemented this way, my sidenav remains hidden. However, if I directly place the sidenav code within the file, it becomes visible and is part of the DOM:
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #sidenav id="mobile-menu-nav" class="sidenav" fixedInViewport="true" mode="over" position="end">
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="#">Link 1</a>
<a mat-list-item href="#">Link 2</a>
<a mat-list-item href="#">Link 3</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
I have verified that my
<app-sidenav></app-sidenav>import {AfterViewInit, Component, OnInit, ViewChild} from '@angular/core';
import {MatSidenav} from '@angular/material';
import {SidenavService} from '../services/sidenav-service.service';
@Component({
selector: 'app-sidenav',
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.css']
})
export class SidenavComponent implements OnInit, AfterViewInit {
@ViewChild('sidenav') public sidenav: MatSidenav;
constructor(private sidenavService: SidenavService) {
}
ngOnInit() {
}
ngAfterViewInit(): void {
this.sidenavService.setSidenav(this.sidenav);
}
}
In addition, the component is properly included in my app.module.ts file... Could someone point out what I might be overlooking?