chore(examples): minor fixes (#10739)

src/material-examples/chips-autocomplete/chips-autocomplete-example.html

@@ -20,7 +20,7 @@
     />
   </mat-chip-list>
   <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
-    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="option">
+    <mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
       {{ fruit }}
     </mat-option>
   </mat-autocomplete>

src/material-examples/sidenav-open-close/sidenav-open-close-example.ts

@@ -7,7 +7,8 @@ import {Component} from '@angular/core';
   styleUrls: ['sidenav-open-close-example.css'],
 })
 export class SidenavOpenCloseExample {
-  events = [];
+  events: string[] = [];
+  opened: boolean;
 
   shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));
 }

src/material-examples/table-basic/table-basic-example.css

@@ -3,9 +3,5 @@
   flex-direction: column;
   max-height: 500px;
   min-width: 300px;
-}
-
-.mat-table {
   overflow: auto;
-  max-height: 500px;
 }

src/material-examples/table-filtering/table-filtering-example.css

@@ -3,6 +3,8 @@
   display: flex;
   flex-direction: column;
   min-width: 300px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 .example-header {
@@ -14,8 +16,3 @@
   font-size: 14px;
   width: 100%;
 }
-
-.mat-table {
-  overflow: auto;
-  max-height: 500px;
-}

src/material-examples/table-http/table-http-example.css

@@ -2,9 +2,10 @@
 .example-container {
   display: flex;
   flex-direction: column;
-  max-height: 500px;
   min-width: 300px;
   position: relative;
+  max-height: 500px;
+  overflow: auto;
 }
 
 .example-header {
@@ -15,11 +16,6 @@
   font-size: 20px;
 }
 
-.example-table {
-  overflow: auto;
-  min-height: 300px;
-}
-
 .example-loading-shade {
   position: absolute;
   top: 0;

src/material-examples/table-overview/table-overview-example.css

@@ -2,6 +2,8 @@
   display: flex;
   flex-direction: column;
   min-width: 300px;
+  max-height: 500px;
+  overflow: auto;
 }
 
 .example-header {
@@ -14,7 +16,3 @@
   width: 100%;
 }
 
-.mat-table {
-  overflow: auto;
-  max-height: 500px;
-}

src/material-examples/table-pagination/table-pagination-example.css

@@ -2,9 +2,7 @@
   display: flex;
   flex-direction: column;
   min-width: 300px;
+  max-height: 500px;
+  overflow: auto;
 }
 
-.mat-table {
-  overflow: auto;
-  max-height: 500px;
-}

src/material-examples/table-selection/table-selection-example.css

@@ -3,11 +3,7 @@
   flex-direction: column;
   max-height: 500px;
   min-width: 300px;
-}
-
-.mat-table {
   overflow: auto;
-  max-height: 500px;
 }
 
 .mat-column-select {

src/material-examples/table-sorting/table-sorting-example.css

@@ -2,9 +2,6 @@
   display: flex;
   flex-direction: column;
   min-width: 300px;
-}
-
-.mat-table {
   overflow: auto;
   max-height: 500px;
 }