fix: workaround issues with ngIf template vars in Angular 9.0.0-rc.5

details: angular/material.angular.io#689 (comment)

Author: Splaktar

material.angular.io/src/app/pages/component-viewer/component-api.html

@@ -1,16 +1,16 @@
 <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
   <span class="cdk-visually-hidden" tabindex="-1" #initialFocusTarget>
-    API for {{docItem.id}}
+    API for {{docItem?.id}}
   </span>
 
   <span>
     <doc-viewer
-      documentUrl="/docs-content/api-docs/{{docItem.packageName}}-{{docItem.id}}.html"
+      documentUrl="/docs-content/api-docs/{{docItem?.packageName}}-{{docItem?.id}}.html"
       class="docs-component-view-text-content docs-component-api"
-      (contentRendered)="updateTableOfContents(docItem.name, $event)">
+      (contentRendered)="updateTableOfContents(docItem!.name, $event)">
     </doc-viewer>
 
-    <doc-viewer *ngFor="let additionalApiDoc of docItem.additionalApiDocs"
+    <doc-viewer *ngFor="let additionalApiDoc of docItem!.additionalApiDocs"
       documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
       class="docs-component-view-text-content docs-component-api"
       (contentRendered)="updateTableOfContents(additionalApiDoc.name, $event)">

material.angular.io/src/app/pages/component-viewer/component-examples.html

@@ -1,8 +1,8 @@
 <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
   <span class="cdk-visually-hidden" tabindex="-1" #initialFocusTarget>
-    Examples for {{docItem.id}}
+    Examples for {{docItem?.id}}
   </span>
   <example-viewer
-    *ngFor="let example of docItem.examples"
+    *ngFor="let example of docItem?.examples"
     [example]="example"></example-viewer>
 </ng-container>

material.angular.io/src/app/pages/component-viewer/component-overview.html

@@ -1,9 +1,9 @@
 <ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
   <span class="cdk-visually-hidden" tabindex="-1" #initialFocusTarget>
-    Overview for {{docItem.id}}
+    Overview for {{docItem?.id}}
   </span>
   <doc-viewer
-      documentUrl="/docs-content/overviews/{{docItem.packageName}}/{{docItem.id}}.html"
+      documentUrl="/docs-content/overviews/{{docItem?.packageName}}/{{docItem?.id}}.html"
       class="docs-component-view-text-content docs-component-overview"
       (contentRendered)="updateTableOfContents('Overview Content', $event)">
   </doc-viewer>