fix: errors when reading optional queries

Some optional queries were incorrectly marked as required which was throwing runtime errors.

Author: crisbeto

src/app/pages/component-sidenav/component-sidenav.html

@@ -10,7 +10,7 @@
     </mat-sidenav>
   }
   <div class="docs-component-sidenav-content">
-    <component-page-header (toggleSidenav)="toggleSidenav(sidenav())"></component-page-header>
+    <component-page-header (toggleSidenav)="toggleSidenav()"></component-page-header>
     <div class="docs-component-sidenav-inner-content">
       <main class="docs-component-sidenav-body-content">
         <!-- If on large screen, menu resides to left of content -->

src/app/pages/component-sidenav/component-sidenav.ts

@@ -82,7 +82,7 @@ const SMALL_WIDTH_BREAKPOINT = 959;
   ],
 })
 export class ComponentSidenav implements OnInit, OnDestroy {
-  readonly sidenav = viewChild.required(MatSidenav);
+  readonly sidenav = viewChild(MatSidenav);
   params: Observable<Params> | undefined;
   isExtraScreenSmall: Observable<boolean>;
   isScreenSmall: Observable<boolean>;
@@ -120,8 +120,8 @@ export class ComponentSidenav implements OnInit, OnDestroy {
     this.subscriptions.unsubscribe();
   }
 
-  toggleSidenav(sidenav: MatSidenav): Promise<MatDrawerToggleResult> {
-    return sidenav.toggle();
+  toggleSidenav(): void {
+    this.sidenav()?.toggle();
   }
 }
 

src/app/pages/component-viewer/component-viewer.ts

@@ -94,7 +94,7 @@ export class ComponentViewer implements OnDestroy {
  */
 @Directive()
 export class ComponentBaseView implements OnInit, OnDestroy {
-  readonly tableOfContents = viewChild.required<TableOfContents>('toc');
+  readonly tableOfContents = viewChild<TableOfContents>('toc');
   readonly viewers = viewChildren(DocViewer);
 
   showToc: Observable<boolean>;