Updated existing Angular Material examples

src/assets/angular-material-examples/autocomplete-display/autocomplete-display-example.ts

@@ -27,7 +27,7 @@ export class AutocompleteDisplayExample implements OnInit {
   ngOnInit() {
     this.filteredOptions = this.myControl.valueChanges
       .pipe(
-        startWith<string | User>(''),
+        startWith(''),
         map(value => typeof value === 'string' ? value : value.name),
         map(name => name ? this._filter(name) : this.options.slice())
       );

src/assets/angular-material-examples/autocomplete-optgroup/autocomplete-optgroup-example.ts

@@ -24,7 +24,7 @@ export const _filter = (opt: string[], value: string): string[] => {
 })
 
 export class AutocompleteOptgroupExample implements OnInit {
-  stateForm: FormGroup = this.fb.group({
+  stateForm: FormGroup = this._formBuilder.group({
     stateGroup: '',
   });
 
@@ -91,7 +91,7 @@ export class AutocompleteOptgroupExample implements OnInit {
 
   stateGroupOptions: Observable<StateGroup[]>;
 
-  constructor(private fb: FormBuilder) {}
+  constructor(private _formBuilder: FormBuilder) {}
 
   ngOnInit() {
     this.stateGroupOptions = this.stateForm.get('stateGroup')!.valueChanges

src/assets/angular-material-examples/badge-overview/badge-overview-example.html

@@ -13,5 +13,9 @@
 <p>
   Icon with a badge
   <mat-icon matBadge="15" matBadgeColor="warn">home</mat-icon>
+    <!-- Include text description of the icon's meaning for screen-readers -->
+    <span class="cdk-visually-hidden">
+      Example with a home icon with overlaid badge showing the number 15
+    </span>
 </p>
 

src/assets/angular-material-examples/bottom-sheet-overview/bottom-sheet-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
+import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
 
 /**
  * @title Bottom Sheet Overview
@@ -10,10 +10,10 @@ import {MatBottomSheet, MatBottomSheetRef} from '@angular/material';
   styleUrls: ['bottom-sheet-overview-example.css'],
 })
 export class BottomSheetOverviewExample {
-  constructor(private bottomSheet: MatBottomSheet) {}
+  constructor(private _bottomSheet: MatBottomSheet) {}
 
   openBottomSheet(): void {
-    this.bottomSheet.open(BottomSheetOverviewExampleSheet);
+    this._bottomSheet.open(BottomSheetOverviewExampleSheet);
   }
 }
 
@@ -22,10 +22,10 @@ export class BottomSheetOverviewExample {
   templateUrl: 'bottom-sheet-overview-example-sheet.html',
 })
 export class BottomSheetOverviewExampleSheet {
-  constructor(private bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
+  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetOverviewExampleSheet>) {}
 
   openLink(event: MouseEvent): void {
-    this.bottomSheetRef.dismiss();
+    this._bottomSheetRef.dismiss();
     event.preventDefault();
   }
 }

src/assets/angular-material-examples/button-toggle-appearance/button-toggle-appearance-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-button-toggle-group {
+  margin-left: 12px;
+}

src/assets/angular-material-examples/button-toggle-exclusive/button-toggle-exclusive-example.html

@@ -1,14 +1,14 @@
 <mat-button-toggle-group #group="matButtonToggleGroup">
-  <mat-button-toggle value="left">
+  <mat-button-toggle value="left" aria-label="Text align left">
     <mat-icon>format_align_left</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="center">
+  <mat-button-toggle value="center" aria-label="Text align center">
     <mat-icon>format_align_center</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="right">
+  <mat-button-toggle value="right" aria-label="Text align right">
     <mat-icon>format_align_right</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="justify" disabled>
+  <mat-button-toggle value="justify" disabled aria-label="Text align justify">
     <mat-icon>format_align_justify</mat-icon>
   </mat-button-toggle>
 </mat-button-toggle-group>

src/assets/angular-material-examples/button-types/button-types-example.html

@@ -40,20 +40,20 @@
 
 <h3>Icon Buttons</h3>
 <div class="example-button-row">
-  <button mat-icon-button>
+  <button mat-icon-button aria-label="Example icon-button with a heart icon">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button color="primary">
+  <button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button color="accent">
+  <button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button color="warn">
+  <button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button disabled>
+  <button mat-icon-button disabled aria-label="Example icon-button with a heart icon">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
 </div>
 
@@ -64,8 +64,8 @@
   <button mat-fab color="accent">Accent</button>
   <button mat-fab color="warn">Warn</button>
   <button mat-fab disabled>Disabled</button>
-  <button mat-fab>
+  <button mat-fab aria-label="Example icon-button with a heart icon">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
   <a mat-fab routerLink=".">Link</a>
 </div>
@@ -77,8 +77,8 @@
   <button mat-mini-fab color="accent">Accent</button>
   <button mat-mini-fab color="warn">Warn</button>
   <button mat-mini-fab disabled>Disabled</button>
-  <button mat-mini-fab>
+  <button mat-mini-fab aria-label="Example icon-button with a heart icon">
-    <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
+    <mat-icon>favorite</mat-icon>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
 </div>

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

@@ -1,5 +1,5 @@
 <mat-form-field class="example-chip-list">
-  <mat-chip-list #chipList>
+  <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip
       *ngFor="let fruit of fruits"
       [selectable]="selectable"

src/assets/angular-material-examples/chips-autocomplete/chips-autocomplete-example.ts

@@ -1,7 +1,8 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component, ElementRef, ViewChild} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {MatAutocompleteSelectedEvent, MatChipInputEvent, MatAutocomplete} from '@angular/material';
+import {MatAutocompleteSelectedEvent, MatAutocomplete} from '@angular/material/autocomplete';
+import {MatChipInputEvent} from '@angular/material/chips';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 
@@ -24,8 +25,8 @@ export class ChipsAutocompleteExample {
   fruits: string[] = ['Lemon'];
   allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];
 
-  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
+  @ViewChild('fruitInput', {static: false}) fruitInput: ElementRef<HTMLInputElement>;
-  @ViewChild('auto') matAutocomplete: MatAutocomplete;
+  @ViewChild('auto', {static: false}) matAutocomplete: MatAutocomplete;
 
   constructor() {
     this.filteredFruits = this.fruitCtrl.valueChanges.pipe(

src/assets/angular-material-examples/chips-input/chips-input-example.html

@@ -1,5 +1,5 @@
 <mat-form-field class="example-chip-list">
-  <mat-chip-list #chipList>
+  <mat-chip-list #chipList aria-label="Fruit selection">
     <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
              [removable]="removable" (removed)="remove(fruit)">
       {{fruit.name}}

src/assets/angular-material-examples/chips-input/chips-input-example.ts

@@ -1,6 +1,6 @@
 import {COMMA, ENTER} from '@angular/cdk/keycodes';
 import {Component} from '@angular/core';
-import {MatChipInputEvent} from '@angular/material';
+import {MatChipInputEvent} from '@angular/material/chips';
 
 export interface Fruit {
   name: string;

src/assets/angular-material-examples/chips-overview/chips-overview-example.html

@@ -1,4 +1,4 @@
-<mat-chip-list>
+<mat-chip-list aria-label="Fish selection">
   <mat-chip>One fish</mat-chip>
   <mat-chip>Two fish</mat-chip>
   <mat-chip color="primary" selected>Primary fish</mat-chip>

src/assets/angular-material-examples/chips-stacked/chips-stacked-example.html

@@ -1,4 +1,4 @@
-<mat-chip-list class="mat-chip-list-stacked">
+<mat-chip-list class="mat-chip-list-stacked" aria-label="Color selection">
   <mat-chip *ngFor="let chip of availableColors" selected [color]="chip.color">
     {{chip.name}}
   </mat-chip>

src/assets/angular-material-examples/datepicker-api/datepicker-api-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/datepicker-color/datepicker-color-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/datepicker-custom-header/datepicker-custom-header-example.ts

@@ -2,11 +2,10 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  Host,
   Inject,
   OnDestroy
 } from '@angular/core';
-import {MatCalendar} from '@angular/material';
+import {MatCalendar} from '@angular/material/datepicker';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
@@ -64,37 +63,36 @@ export class DatepickerCustomHeaderExample {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleHeader<D> implements OnDestroy {
-  private destroyed = new Subject<void>();
+  private _destroyed = new Subject<void>();
 
-  constructor(@Host() private calendar: MatCalendar<D>,
+  constructor(
-              private dateAdapter: DateAdapter<D>,
+      private _calendar: MatCalendar<D>, private _dateAdapter: DateAdapter<D>,
-              @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
+      @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, cdr: ChangeDetectorRef) {
-              cdr: ChangeDetectorRef) {
+    _calendar.stateChanges
-    calendar.stateChanges
+        .pipe(takeUntil(this._destroyed))
-        .pipe(takeUntil(this.destroyed))
         .subscribe(() => cdr.markForCheck());
   }
 
   ngOnDestroy() {
-    this.destroyed.next();
+    this._destroyed.next();
-    this.destroyed.complete();
+    this._destroyed.complete();
   }
 
   get periodLabel() {
-    return this.dateAdapter
+    return this._dateAdapter
-        .format(this.calendar.activeDate, this.dateFormats.display.monthYearLabel)
+        .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
         .toLocaleUpperCase();
   }
 
   previousClicked(mode: 'month' | 'year') {
-    this.calendar.activeDate = mode === 'month' ?
+    this._calendar.activeDate = mode === 'month' ?
-        this.dateAdapter.addCalendarMonths(this.calendar.activeDate, -1) :
+        this._dateAdapter.addCalendarMonths(this._calendar.activeDate, -1) :
-        this.dateAdapter.addCalendarYears(this.calendar.activeDate, -1);
+        this._dateAdapter.addCalendarYears(this._calendar.activeDate, -1);
   }
 
   nextClicked(mode: 'month' | 'year') {
-    this.calendar.activeDate = mode === 'month' ?
+    this._calendar.activeDate = mode === 'month' ?
-        this.dateAdapter.addCalendarMonths(this.calendar.activeDate, 1) :
+        this._dateAdapter.addCalendarMonths(this._calendar.activeDate, 1) :
-        this.dateAdapter.addCalendarYears(this.calendar.activeDate, 1);
+        this._dateAdapter.addCalendarYears(this._calendar.activeDate, 1);
   }
 }

src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/datepicker-locale/datepicker-locale-example.ts

@@ -20,9 +20,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
   ],
 })
 export class DatepickerLocaleExample {
-  constructor(private adapter: DateAdapter<any>) {}
+  constructor(private _adapter: DateAdapter<any>) {}
 
   french() {
-    this.adapter.setLocale('fr');
+    this._adapter.setLocale('fr');
   }
 }

src/assets/angular-material-examples/datepicker-value/datepicker-value-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/datepicker-views-selection/datepicker-views-selection-example.ts

@@ -53,9 +53,9 @@ export class DatepickerViewsSelectionExample {
     this.date.setValue(ctrlValue);
   }
 
-  chosenMonthHandler(normlizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
+  chosenMonthHandler(normalizedMonth: Moment, datepicker: MatDatepicker<Moment>) {
     const ctrlValue = this.date.value;
-    ctrlValue.month(normlizedMonth.month());
+    ctrlValue.month(normalizedMonth.month());
     this.date.setValue(ctrlValue);
     datepicker.close();
   }

src/assets/angular-material-examples/dialog-content/dialog-content-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
 
 /**
  * @title Dialog with header, scrollable content and actions

src/assets/angular-material-examples/dialog-data/dialog-data-example.ts

@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface DialogData {
   animal: 'panda' | 'unicorn' | 'lion';

src/assets/angular-material-examples/dialog-elements/dialog-elements-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatDialog} from '@angular/material';
+import {MatDialog} from '@angular/material/dialog';
 
 /**
  * @title Dialog elements

src/assets/angular-material-examples/dialog-overview/dialog-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component, Inject} from '@angular/core';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 export interface DialogData {
   animal: string;

src/assets/angular-material-examples/expansion-expand-collapse-all/expansion-expand-collapse-all-example.ts

@@ -1,5 +1,5 @@
 import {Component, ViewChild} from '@angular/core';
-import {MatAccordion} from '@angular/material';
+import {MatAccordion} from '@angular/material/expansion';
 
 /**
  * @title Accordion with expand/collapse all toggles
@@ -10,5 +10,5 @@ import {MatAccordion} from '@angular/material';
   styleUrls: ['expansion-expand-collapse-all-example.css'],
 })
 export class ExpansionExpandCollapseAllExample {
-  @ViewChild(MatAccordion) accordion: MatAccordion;
+  @ViewChild(MatAccordion, {static: false}) accordion: MatAccordion;
 }

src/assets/angular-material-examples/expansion-steps/expansion-steps-example.css

@@ -7,3 +7,7 @@
   justify-content: space-between;
   align-items: center;
 }
+
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.css

@@ -17,3 +17,7 @@
 .example-focus-monitor .cdk-program-focused {
   background: rgba(255, 0, 255, 0.5);
 }
+
+button {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/focus-monitor-directives/focus-monitor-directives-example.ts

@@ -11,7 +11,7 @@ export class FocusMonitorDirectivesExample {
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
+  constructor(private _ngZone: NgZone, private _cdr: ChangeDetectorRef) {}
 
 
   formatOrigin(origin: FocusOrigin): string {
@@ -20,6 +20,6 @@ export class FocusMonitorDirectivesExample {
 
   // Workaround for the fact that (cdkFocusChange) emits outside NgZone.
   markForCheck() {
-    this.ngZone.run(() => this.cdr.markForCheck());
+    this._ngZone.run(() => this._cdr.markForCheck());
   }
 }

src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.css

@@ -21,3 +21,8 @@
 .example-focus-monitor button:focus {
   box-shadow: 0 0 30px cyan;
 }
+
+mat-form-field,
+button {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/focus-monitor-focus-via/focus-monitor-focus-via-example.ts

@@ -1,11 +1,11 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
   NgZone,
   OnDestroy,
-  OnInit,
   ViewChild
 } from '@angular/core';
 
@@ -15,20 +15,20 @@ import {
   templateUrl: 'focus-monitor-focus-via-example.html',
   styleUrls: ['focus-monitor-focus-via-example.css']
 })
-export class FocusMonitorFocusViaExample implements OnDestroy, OnInit {
+export class FocusMonitorFocusViaExample implements OnDestroy, AfterViewInit {
-  @ViewChild('monitored') monitoredEl: ElementRef<HTMLElement>;
+  @ViewChild('monitored', {static: false}) monitoredEl: ElementRef<HTMLElement>;
 
   origin = this.formatOrigin(null);
 
   constructor(public focusMonitor: FocusMonitor,
-              private cdr: ChangeDetectorRef,
+              private _cdr: ChangeDetectorRef,
-              private ngZone: NgZone) {}
+              private _ngZone: NgZone) {}
 
-  ngOnInit() {
+  ngAfterViewInit() {
     this.focusMonitor.monitor(this.monitoredEl)
-        .subscribe(origin => this.ngZone.run(() => {
+        .subscribe(origin => this._ngZone.run(() => {
           this.origin = this.formatOrigin(origin);
-          this.cdr.markForCheck();
+          this._cdr.markForCheck();
         }));
   }
 

src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.css

@@ -17,3 +17,7 @@
 .example-focus-monitor .cdk-program-focused {
   background: rgba(255, 0, 255, 0.5);
 }
+
+button {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/focus-monitor-overview/focus-monitor-overview-example.ts

@@ -1,11 +1,11 @@
 import {FocusMonitor, FocusOrigin} from '@angular/cdk/a11y';
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   Component,
   ElementRef,
   NgZone,
   OnDestroy,
-  OnInit,
   ViewChild
 } from '@angular/core';
 
@@ -15,33 +15,33 @@ import {
   templateUrl: 'focus-monitor-overview-example.html',
   styleUrls: ['focus-monitor-overview-example.css']
 })
-export class FocusMonitorOverviewExample implements OnDestroy, OnInit {
+export class FocusMonitorOverviewExample implements OnDestroy, AfterViewInit {
-  @ViewChild('element') element: ElementRef<HTMLElement>;
+  @ViewChild('element', {static: false}) element: ElementRef<HTMLElement>;
-  @ViewChild('subtree') subtree: ElementRef<HTMLElement>;
+  @ViewChild('subtree', {static: false}) subtree: ElementRef<HTMLElement>;
 
   elementOrigin = this.formatOrigin(null);
   subtreeOrigin = this.formatOrigin(null);
 
-  constructor(private focusMonitor: FocusMonitor,
+  constructor(private _focusMonitor: FocusMonitor,
-              private cdr: ChangeDetectorRef,
+              private _cdr: ChangeDetectorRef,
-              private ngZone: NgZone) {}
+              private _ngZone: NgZone) {}
 
-  ngOnInit() {
+  ngAfterViewInit() {
-    this.focusMonitor.monitor(this.element)
+    this._focusMonitor.monitor(this.element)
-        .subscribe(origin => this.ngZone.run(() => {
+        .subscribe(origin => this._ngZone.run(() => {
           this.elementOrigin = this.formatOrigin(origin);
-          this.cdr.markForCheck();
+          this._cdr.markForCheck();
         }));
-    this.focusMonitor.monitor(this.subtree, true)
+    this._focusMonitor.monitor(this.subtree, true)
-        .subscribe(origin => this.ngZone.run(() => {
+        .subscribe(origin => this._ngZone.run(() => {
           this.subtreeOrigin = this.formatOrigin(origin);
-          this.cdr.markForCheck();
+          this._cdr.markForCheck();
         }));
   }
 
   ngOnDestroy() {
-    this.focusMonitor.stopMonitoring(this.element);
+    this._focusMonitor.stopMonitoring(this.element);
-    this.focusMonitor.stopMonitoring(this.subtree);
+    this._focusMonitor.stopMonitoring(this.subtree);
   }
 
   formatOrigin(origin: FocusOrigin): string {

src/assets/angular-material-examples/form-field-custom-control/example-tel-input-example.html

@@ -1,7 +1,7 @@
 <div [formGroup]="parts" class="example-tel-input-container">
-  <input class="example-tel-input-element" formControlName="area" size="3">
+  <input class="example-tel-input-element" formControlName="area" size="3" aria-label="Area code" (input)="_handleInput()">
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input class="example-tel-input-element" formControlName="exchange" size="3">
+  <input class="example-tel-input-element" formControlName="exchange" size="3" aria-label="Exchange code" (input)="_handleInput()">
   <span class="example-tel-input-spacer">&ndash;</span>
-  <input class="example-tel-input-element" formControlName="subscriber" size="4">
+  <input class="example-tel-input-element" formControlName="subscriber" size="4" aria-label="Subscriber number" (input)="_handleInput()">
 </div>

src/assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example.ts

@@ -1,8 +1,8 @@
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {Component, ElementRef, Input, OnDestroy} from '@angular/core';
+import {Component, ElementRef, Input, OnDestroy, Optional, Self} from '@angular/core';
-import {FormBuilder, FormGroup} from '@angular/forms';
+import {FormBuilder, FormGroup, ControlValueAccessor, NgControl} from '@angular/forms';
-import {MatFormFieldControl} from '@angular/material';
+import {MatFormFieldControl} from '@angular/material/form-field';
 import {Subject} from 'rxjs';
 
 /** @title Form field with custom telephone number input control. */
@@ -30,17 +30,18 @@ export class MyTel {
     '[attr.aria-describedby]': 'describedBy',
   }
 })
-export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
+export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyTel>, OnDestroy {
   static nextId = 0;
 
   parts: FormGroup;
   stateChanges = new Subject<void>();
   focused = false;
-  ngControl = null;
   errorState = false;
   controlType = 'example-tel-input';
   id = `example-tel-input-${MyTelInput.nextId++}`;
   describedBy = '';
+  onChange = (_: any) => {};
+  onTouched = () => {};
 
   get empty() {
     const {value: {area, exchange, subscriber}} = this.parts;
@@ -70,6 +71,7 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
   get disabled(): boolean { return this._disabled; }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
+    this._disabled ? this.parts.disable() : this.parts.enable();
     this.stateChanges.next();
   }
   private _disabled = false;
@@ -88,22 +90,34 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
     this.stateChanges.next();
   }
 
-  constructor(fb: FormBuilder, private fm: FocusMonitor, private elRef: ElementRef<HTMLElement>) {
+  constructor(
-    this.parts = fb.group({
+    formBuilder: FormBuilder,
+    private _focusMonitor: FocusMonitor,
+    private _elementRef: ElementRef<HTMLElement>,
+    @Optional() @Self() public ngControl: NgControl) {
+
+    this.parts = formBuilder.group({
       area: '',
       exchange: '',
       subscriber: '',
     });
 
-    fm.monitor(elRef, true).subscribe(origin => {
+    _focusMonitor.monitor(_elementRef, true).subscribe(origin => {
+      if (this.focused && !origin) {
+        this.onTouched();
+      }
       this.focused = !!origin;
       this.stateChanges.next();
     });
+
+    if (this.ngControl != null) {
+      this.ngControl.valueAccessor = this;
+    }
   }
 
   ngOnDestroy() {
     this.stateChanges.complete();
-    this.fm.stopMonitoring(this.elRef);
+    this._focusMonitor.stopMonitoring(this._elementRef);
   }
 
   setDescribedByIds(ids: string[]) {
@@ -112,7 +126,27 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy {
 
   onContainerClick(event: MouseEvent) {
     if ((event.target as Element).tagName.toLowerCase() != 'input') {
-      this.elRef.nativeElement.querySelector('input')!.focus();
+      this._elementRef.nativeElement.querySelector('input')!.focus();
     }
   }
+
+  writeValue(tel: MyTel | null): void {
+    this.value = tel;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  _handleInput(): void {
+    this.onChange(this.parts.value);
+  }
 }

src/assets/angular-material-examples/form-field-label/form-field-label-example.css

@@ -16,5 +16,5 @@
 }
 
 .example-container .mat-radio-button {
-  margin: 0 5px;
+  margin: 0 12px;
 }

src/assets/angular-material-examples/form-field-prefix-suffix/form-field-prefix-suffix-example.html

@@ -1,7 +1,9 @@
 <div class="example-container">
   <mat-form-field>
     <input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'">
-    <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+    <button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+    <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+    </button>
   </mat-form-field>
 
   <mat-form-field>

src/assets/angular-material-examples/icon-overview/icon-overview-example.html

@@ -1 +1 @@
-<mat-icon>home</mat-icon>
+<mat-icon aria-hidden="false" aria-label="Example home icon">home</mat-icon>

src/assets/angular-material-examples/icon-svg/icon-svg-example.html

@@ -1 +1 @@
-<mat-icon svgIcon="thumbs-up"></mat-icon>
+<mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>

src/assets/angular-material-examples/icon-svg/icon-svg-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {MatIconRegistry} from '@angular/material';
+import {MatIconRegistry} from '@angular/material/icon';
 
 /**
  * @title SVG icons

src/assets/angular-material-examples/input-form/input-form-example.css

@@ -7,3 +7,7 @@
 .example-full-width {
   width: 100%;
 }
+
+td {
+  padding-right: 8px;
+}

src/assets/angular-material-examples/menu-icons/menu-icons-example.html

@@ -1,4 +1,4 @@
-<button mat-icon-button [matMenuTriggerFor]="menu">
+<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
   <mat-icon>more_vert</mat-icon>
 </button>
 <mat-menu #menu="matMenu">

src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/paginator-configurable/paginator-configurable-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {PageEvent} from '@angular/material';
+import {PageEvent} from '@angular/material/paginator';
 
 /**
  * @title Configurable paginator

src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.css

@@ -1,12 +1,9 @@
 .example-radio-group {
-  display: inline-flex;
+  display: flex;
   flex-direction: column;
+  margin: 15px 0;
 }
 
 .example-radio-button {
   margin: 5px;
 }
-
-.example-selected-value {
-  margin: 15px 0;
-}

src/assets/angular-material-examples/radio-ng-model/radio-ng-model-example.html

@@ -1,6 +1,10 @@
-<mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason">
+<label id="example-radio-group-label">Pick your favorite season</label>
+<mat-radio-group
+  aria-labelledby="example-radio-group-label"
+  class="example-radio-group"
+  [(ngModel)]="favoriteSeason">
   <mat-radio-button class="example-radio-button" *ngFor="let season of seasons" [value]="season">
     {{season}}
   </mat-radio-button>
 </mat-radio-group>
-<div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>
+<div>Your favorite season is: {{favoriteSeason}}</div>

src/assets/angular-material-examples/radio-overview/radio-overview-example.css

@@ -1,3 +1,3 @@
 .mat-radio-button ~ .mat-radio-button {
-  padding-right: 16px;
+  margin-left: 16px;
 }

src/assets/angular-material-examples/radio-overview/radio-overview-example.html

@@ -1,4 +1,4 @@
-<mat-radio-group>
+<mat-radio-group aria-label="Select an option">
   <mat-radio-button value="1">Option 1</mat-radio-button>
   <mat-radio-button value="2">Option 2</mat-radio-button>
 </mat-radio-group>

src/assets/angular-material-examples/select-disabled/select-disabled-example.html

@@ -4,7 +4,8 @@
 
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
+  <mat-label>Choose an option</mat-label>
+  <mat-select [disabled]="disableSelect.value">
     <mat-option value="option1">Option 1</mat-option>
     <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
     <mat-option value="option3">Option 3</mat-option>
@@ -13,8 +14,9 @@
 
 <h4>native html select</h4>
 <mat-form-field>
-  <select matNativeControl placeholder="Choose an option" [disabled]="disableSelect.value">
+  <mat-label>Choose an option</mat-label>
-    <option value="" disabled selected></option>
+  <select matNativeControl [disabled]="disableSelect.value">
+    <option value="" selected></option>
     <option value="volvo">Volvo</option>
     <option value="saab" disabled>Saab</option>
     <option value="mercedes">Mercedes</option>

src/assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example.html

@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <mat-select [formControl]="selected" [errorStateMatcher]="matcher">
     <mat-option>Clear</mat-option>
     <mat-option value="valid">Valid option</mat-option>
     <mat-option value="invalid">Invalid option</mat-option>
@@ -14,7 +15,8 @@
 
 <h4>native html select</h4>
 <mat-form-field class="demo-full-width">
-  <select matNativeControl placeholder="Choose one" [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
+  <mat-label>Choose one</mat-label>
+  <select matNativeControl [formControl]="nativeSelectFormControl" [errorStateMatcher]="matcher">
     <option value=""></option>
     <option value="valid" selected>Valid option</option>
     <option value="invalid">Invalid option</option>

src/assets/angular-material-examples/select-form/select-form-example.html

@@ -1,7 +1,8 @@
 <form>
   <h4>mat-select</h4>
   <mat-form-field>
-    <mat-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
+    <mat-label>Favorite food</mat-label>
+    <mat-select [(ngModel)]="selectedValue" name="food">
       <mat-option *ngFor="let food of foods" [value]="food.value">
         {{food.viewValue}}
       </mat-option>
@@ -10,8 +11,9 @@
   <p> Selected food: {{selectedValue}} </p>
   <h4>native html select</h4>
   <mat-form-field>
-    <select matNativeControl placeholder="Favorite car" [(ngModel)]="selectedCar" name="car">
+    <mat-label>Favorite car</mat-label>
-      <option value="" disabled selected></option>
+    <select matNativeControl [(ngModel)]="selectedCar" name="car">
+      <option value="" selected></option>
       <option *ngFor="let car of cars" [value]="car.value">
         {{car.viewValue}}
       </option>

src/assets/angular-material-examples/select-hint-error/select-hint-error-example.html

@@ -1,6 +1,7 @@
 <h4>mat select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
+  <mat-label>Favorite animal</mat-label>
+  <mat-select [formControl]="animalControl" required>
     <mat-option>--</mat-option>
     <mat-option *ngFor="let animal of animals" [value]="animal">
       {{animal.name}}

src/assets/angular-material-examples/select-multiple/select-multiple-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
+  <mat-label>Toppings</mat-label>
+  <mat-select [formControl]="toppings" multiple>
     <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
   </mat-select>
 </mat-form-field>

src/assets/angular-material-examples/select-no-ripple/select-no-ripple-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Select an option" disableRipple>
+  <mat-label>Select an option</mat-label>
+  <mat-select disableRipple>
     <mat-option value="1">Option 1</mat-option>
     <mat-option value="2">Option 2</mat-option>
     <mat-option value="3">Option 3</mat-option>

src/assets/angular-material-examples/select-optgroup/select-optgroup-example.html

@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Pokemon" [formControl]="pokemonControl">
+  <mat-label>Pokemon</mat-label>
+  <mat-select [formControl]="pokemonControl">
     <mat-option>-- None --</mat-option>
     <mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
                   [disabled]="group.disabled">
@@ -13,6 +14,7 @@
 
 <h4>native html select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl>
     <optgroup label="Swedish Cars">
       <option value="volvo">volvo</option>

src/assets/angular-material-examples/select-overview/select-overview-example.html

@@ -1,6 +1,7 @@
 <h4>Basic mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="Favorite food">
+  <mat-label>Favorite food</mat-label>
+  <mat-select>
     <mat-option *ngFor="let food of foods" [value]="food.value">
       {{food.viewValue}}
     </mat-option>
@@ -9,6 +10,7 @@
 
 <h4>Basic native select</h4>
 <mat-form-field>
+  <mat-label>Cars</mat-label>
   <select matNativeControl required>
     <option value="volvo">Volvo</option>
     <option value="saab">Saab</option>

src/assets/angular-material-examples/select-panel-class/select-panel-class-example.html

@@ -1,5 +1,6 @@
 <mat-form-field>
-  <mat-select placeholder="Panel color" [formControl]="panelColor"
+  <mat-label>Panel color</mat-label>
+  <mat-select [formControl]="panelColor"
               panelClass="example-panel-{{panelColor.value}}">
     <mat-option value="red">Red</mat-option>
     <mat-option value="green">Green</mat-option>

src/assets/angular-material-examples/select-reset/select-reset-example.html

@@ -1,6 +1,7 @@
 <h4>mat-select</h4>
 <mat-form-field>
-  <mat-select placeholder="State">
+  <mat-label>State</mat-label>
+  <mat-select>
     <mat-option>None</mat-option>
     <mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
   </mat-select>

src/assets/angular-material-examples/select-value-binding/select-value-binding-example.html

@@ -1,4 +1,5 @@
 <mat-form-field>
+  <mat-label>Select an option</mat-label>
   <mat-select [(value)]="selected">
     <mat-option>None</mat-option>
     <mat-option value="option1">Option 1</mat-option>

src/assets/angular-material-examples/sidenav-backdrop/sidenav-backdrop-example.css

@@ -1,6 +1,13 @@
 .example-container {
   width: 400px;
   height: 200px;
-  margin: 10px;
+  margin: 12px;
   border: 1px solid #555;
 }
+
+mat-drawer-content {
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}

src/assets/angular-material-examples/sidenav-disable-close/sidenav-disable-close-example.ts

@@ -8,7 +8,7 @@ import {MatSidenav} from '@angular/material/sidenav';
   styleUrls: ['sidenav-disable-close-example.css'],
 })
 export class SidenavDisableCloseExample {
-  @ViewChild('sidenav') sidenav: MatSidenav;
+  @ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
 
   reason = '';
 

src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.css

@@ -0,0 +1 @@
+/** No CSS for this example */

src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.html

@@ -1,3 +1,8 @@
+<mat-form-field>
+  <mat-label>Snack bar duration (seconds)</mat-label>
+  <input type="number" [(ngModel)]="durationInSeconds" matInput>
+</mat-form-field>
+
 <button mat-button (click)="openSnackBar()" aria-label="Show an example snack-bar">
   Pizza party
 </button>

src/assets/angular-material-examples/snack-bar-component/snack-bar-component-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with a custom component
@@ -7,13 +7,16 @@ import {MatSnackBar} from '@angular/material';
 @Component({
   selector: 'snack-bar-component-example',
   templateUrl: 'snack-bar-component-example.html',
+  styleUrls: ['snack-bar-component-example.css'],
 })
 export class SnackBarComponentExample {
-  constructor(public snackBar: MatSnackBar) {}
+  durationInSeconds = 5;
+
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar() {
-    this.snackBar.openFromComponent(PizzaPartyComponent, {
+    this._snackBar.openFromComponent(PizzaPartyComponent, {
-      duration: 500,
+      duration: this.durationInSeconds * 1000,
     });
   }
 }

src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/snack-bar-overview/snack-bar-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatSnackBar} from '@angular/material';
+import {MatSnackBar} from '@angular/material/snack-bar';
 
 /**
  * @title Basic snack-bar
@@ -10,10 +10,10 @@ import {MatSnackBar} from '@angular/material';
   styleUrls: ['snack-bar-overview-example.css'],
 })
 export class SnackBarOverviewExample {
-  constructor(public snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar(message: string, action: string) {
-    this.snackBar.open(message, action, {
+    this._snackBar.open(message, action, {
       duration: 2000,
     });
   }

src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.css

@@ -0,0 +1,3 @@
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/snack-bar-position/snack-bar-position-example.ts

@@ -3,7 +3,7 @@ import {
   MatSnackBar,
   MatSnackBarHorizontalPosition,
   MatSnackBarVerticalPosition,
-} from '@angular/material';
+} from '@angular/material/snack-bar';
 
 /**
  * @title Snack-bar with configurable position
@@ -11,16 +11,17 @@ import {
 @Component({
   selector: 'snack-bar-position-example',
   templateUrl: 'snack-bar-position-example.html',
+  styleUrls: ['snack-bar-position-example.css'],
 })
 export class SnackBarPositionExample {
 
   horizontalPosition: MatSnackBarHorizontalPosition = 'start';
   verticalPosition: MatSnackBarVerticalPosition = 'bottom';
 
-  constructor(public snackBar: MatSnackBar) {}
+  constructor(private _snackBar: MatSnackBar) {}
 
   openSnackBar() {
-    this.snackBar.open('Canonball!!', 'End now', {
+    this._snackBar.open('Canonball!!', 'End now', {
       duration: 500,
       horizontalPosition: this.horizontalPosition,
       verticalPosition: this.verticalPosition,

src/assets/angular-material-examples/sort-overview/sort-overview-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {Sort} from '@angular/material';
+import {Sort} from '@angular/material/sort';
 
 export interface Dessert {
   calories: number;

src/assets/angular-material-examples/stepper-errors/stepper-errors-example.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
+import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
 
 /**
  * @title Stepper that displays errors in the steps
@@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
   templateUrl: 'stepper-errors-example.html',
   styleUrls: ['stepper-errors-example.css'],
   providers: [{
-    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
+    provide: STEPPER_GLOBAL_OPTIONS, useValue: {showError: true}
   }]
 })
 export class StepperErrorsExample implements OnInit {

src/assets/angular-material-examples/stepper-states/stepper-states-example.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
+import {STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
 
 /**
  * @title Stepper with customized states
@@ -10,7 +10,7 @@ import {MAT_STEPPER_GLOBAL_OPTIONS} from '@angular/cdk/stepper';
   templateUrl: 'stepper-states-example.html',
   styleUrls: ['stepper-states-example.css'],
   providers: [{
-    provide: MAT_STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
+    provide: STEPPER_GLOBAL_OPTIONS, useValue: {displayDefaultIndicatorType: false}
   }]
 })
 export class StepperStatesExample implements OnInit {

src/assets/angular-material-examples/tab-group-async/tab-group-async-example.ts

@@ -18,7 +18,7 @@ export class TabGroupAsyncExample {
   asyncTabs: Observable<ExampleTab[]>;
 
   constructor() {
-    this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
+    this.asyncTabs = new Observable((observer: Observer<ExampleTab[]>) => {
       setTimeout(() => {
         observer.next([
           {label: 'First', content: 'Content 1'},

src/assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Tag group with dynamic height based on tab contents
+ * @title Tab group with dynamic height based on tab contents
  */
 @Component({
   selector: 'tab-group-dynamic-height-example',

src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.html

@@ -29,7 +29,7 @@
   <tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
       class="example-element-row"
       [class.example-expanded-row]="expandedElement === element"
-      (click)="expandedElement = element">
+      (click)="expandedElement = expandedElement === element ? null : element">
   </tr>
   <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
 </table>

src/assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example.ts

@@ -10,7 +10,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
   templateUrl: 'table-expandable-rows-example.html',
   animations: [
     trigger('detailExpand', [
-      state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
+      state('collapsed', style({height: '0px', minHeight: '0'})),
       state('expanded', style({height: '*'})),
       transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
     ]),
@@ -19,7 +19,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
 export class TableExpandableRowsExample {
   dataSource = ELEMENT_DATA;
   columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
-  expandedElement: PeriodicElement;
+  expandedElement: PeriodicElement | null;
 }
 
 export interface PeriodicElement {

src/assets/angular-material-examples/table-filtering/table-filtering-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;

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

@@ -1,6 +1,7 @@
 /* Structure */
 .example-container {
   position: relative;
+  min-height: 200px;
 }
 
 .example-table-container {

src/assets/angular-material-examples/table-http/table-http-example.html

@@ -10,7 +10,7 @@
   <div class="example-table-container">
 
     <table mat-table [dataSource]="data" class="example-table"
-           matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
+           matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
       <!-- Number Column -->
       <ng-container matColumnDef="number">
         <th mat-header-cell *matHeaderCellDef>#</th>

src/assets/angular-material-examples/table-http/table-http-example.ts

@@ -1,6 +1,7 @@
 import {HttpClient} from '@angular/common/http';
-import {Component, OnInit, ViewChild} from '@angular/core';
+import {Component, ViewChild, AfterViewInit} from '@angular/core';
-import {MatPaginator, MatSort} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
 import {merge, Observable, of as observableOf} from 'rxjs';
 import {catchError, map, startWith, switchMap} from 'rxjs/operators';
 
@@ -12,22 +13,22 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
   styleUrls: ['table-http-example.css'],
   templateUrl: 'table-http-example.html',
 })
-export class TableHttpExample implements OnInit {
+export class TableHttpExample implements AfterViewInit {
   displayedColumns: string[] = ['created', 'state', 'number', 'title'];
-  exampleDatabase: ExampleHttpDao | null;
+  exampleDatabase: ExampleHttpDatabase | null;
   data: GithubIssue[] = [];
 
   resultsLength = 0;
   isLoadingResults = true;
   isRateLimitReached = false;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, {static: false}) sort: MatSort;
 
-  constructor(private http: HttpClient) {}
+  constructor(private _httpClient: HttpClient) {}
 
-  ngOnInit() {
+  ngAfterViewInit() {
-    this.exampleDatabase = new ExampleHttpDao(this.http);
+    this.exampleDatabase = new ExampleHttpDatabase(this._httpClient);
 
     // If the user changes the sort order, reset back to the first page.
     this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
@@ -71,14 +72,14 @@ export interface GithubIssue {
 }
 
 /** An example database that the data source uses to retrieve data for the table. */
-export class ExampleHttpDao {
+export class ExampleHttpDatabase {
-  constructor(private http: HttpClient) {}
+  constructor(private _httpClient: HttpClient) {}
 
   getRepoIssues(sort: string, order: string, page: number): Observable<GithubApi> {
     const href = 'https://api.github.com/search/issues';
     const requestUrl =
-        `${href}?q=repo:angular/material2&sort=${sort}&order=${order}&page=${page + 1}`;
+        `${href}?q=repo:angular/components&sort=${sort}&order=${order}&page=${page + 1}`;
 
-    return this.http.get<GithubApi>(requestUrl);
+    return this._httpClient.get<GithubApi>(requestUrl);
   }
 }

src/assets/angular-material-examples/table-overview/table-overview-example.ts

@@ -1,5 +1,7 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface UserData {
   id: string;
@@ -9,11 +11,14 @@ export interface UserData {
 }
 
 /** Constants used to fill up our data base. */
-const COLORS: string[] = ['maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
+const COLORS: string[] = [
-  'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'];
+  'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple', 'fuchsia', 'lime', 'teal',
-const NAMES: string[] = ['Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
+  'aqua', 'blue', 'navy', 'black', 'gray'
-  'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
+];
-  'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'];
+const NAMES: string[] = [
+  'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack', 'Charlotte', 'Theodore', 'Isla', 'Oliver',
+  'Isabella', 'Jasper', 'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
+];
 
 /**
  * @title Data table with sorting, pagination, and filtering.
@@ -27,8 +32,8 @@ export class TableOverviewExample implements OnInit {
   displayedColumns: string[] = ['id', 'name', 'progress', 'color'];
   dataSource: MatTableDataSource<UserData>;
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   constructor() {
     // Create 100 users
@@ -54,8 +59,7 @@ export class TableOverviewExample implements OnInit {
 
 /** Builds and returns a new User. */
 function createNewUser(id: number): UserData {
-  const name =
+  const name = NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
-      NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
       NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
 
   return {

src/assets/angular-material-examples/table-pagination/table-pagination-example.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatPaginator, MatTableDataSource} from '@angular/material';
+import {MatPaginator} from '@angular/material/paginator';
+import {MatTableDataSource} from '@angular/material/table';
 
 /**
  * @title Table with pagination
@@ -13,7 +14,7 @@ export class TablePaginationExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
 
   ngOnInit() {
     this.dataSource.paginator = this.paginator;

src/assets/angular-material-examples/table-selection/table-selection-example.html

@@ -5,13 +5,15 @@
     <th mat-header-cell *matHeaderCellDef>
       <mat-checkbox (change)="$event ? masterToggle() : null"
                     [checked]="selection.hasValue() && isAllSelected()"
-                    [indeterminate]="selection.hasValue() && !isAllSelected()">
+                    [indeterminate]="selection.hasValue() && !isAllSelected()"
+                    [aria-label]="checkboxLabel()">
       </mat-checkbox>
     </th>
     <td mat-cell *matCellDef="let row">
       <mat-checkbox (click)="$event.stopPropagation()"
                     (change)="$event ? selection.toggle(row) : null"
-                    [checked]="selection.isSelected(row)">
+                    [checked]="selection.isSelected(row)"
+                    [aria-label]="checkboxLabel(row)">
       </mat-checkbox>
     </td>
   </ng-container>

src/assets/angular-material-examples/table-selection/table-selection-example.ts

@@ -1,6 +1,6 @@
 import {SelectionModel} from '@angular/cdk/collections';
 import {Component} from '@angular/core';
-import {MatTableDataSource} from '@angular/material';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;
@@ -48,4 +48,12 @@ export class TableSelectionExample {
         this.selection.clear() :
         this.dataSource.data.forEach(row => this.selection.select(row));
   }
+
+  /** The label for the checkbox on the passed row */
+  checkboxLabel(row?: PeriodicElement): string {
+    if (!row) {
+      return `${this.isAllSelected() ? 'select' : 'deselect'} all`;
+    }
+    return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.position + 1}`;
+  }
 }

src/assets/angular-material-examples/table-simple-column/table-simple-column-example.ts

@@ -1,12 +1,7 @@
 import {Component, Input, OnDestroy, OnInit, Optional, ViewChild} from '@angular/core';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
-import {
+import { MatSort, MatSortHeader } from '@angular/material/sort';
-    MatColumnDef,
+import { MatColumnDef, MatTable, MatTableDataSource } from '@angular/material/table';
-    MatSort,
-    MatSortHeader,
-    MatTable,
-    MatTableDataSource
-} from '@angular/material';
 
 export interface PeriodicElement {
   name: string;
@@ -39,9 +34,9 @@ const ELEMENT_DATA: PeriodicElement[] = [
 export class TableSimpleColumnExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
-  getWeight = (data: PeriodicElement) => '~' + data.weight;
 
-  @ViewChild('sort') sort: MatSort;
+  @ViewChild('sort', {static: true}) sort: MatSort;
+  getWeight = (data: PeriodicElement) => '~' + data.weight;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;
@@ -106,9 +101,9 @@ export class SimpleColumn<T> implements OnDestroy, OnInit {
   }
   _sortable: boolean;
 
-  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
+  @ViewChild(MatColumnDef, {static: true}) columnDef: MatColumnDef;
 
-  @ViewChild(MatSortHeader) sortHeader: MatSortHeader;
+  @ViewChild(MatSortHeader, {static: true}) sortHeader: MatSortHeader;
 
   constructor(@Optional() public table: MatTable<any>) { }
 

src/assets/angular-material-examples/table-sorting/table-sorting-example.ts

@@ -1,5 +1,6 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {MatSort, MatTableDataSource} from '@angular/material';
+import {MatSort} from '@angular/material/sort';
+import {MatTableDataSource} from '@angular/material/table';
 
 export interface PeriodicElement {
   name: string;
@@ -33,7 +34,7 @@ export class TableSortingExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
-  @ViewChild(MatSort) sort: MatSort;
+  @ViewChild(MatSort, {static: true}) sort: MatSort;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;

src/assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
 
 /**
- * @title Table with a sticky columns
+ * @title Table with sticky columns
  */
 @Component({
   selector: 'table-sticky-columns-example',

src/assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatButtonToggleGroup} from '@angular/material';
+import {MatButtonToggleGroup} from '@angular/material/button-toggle';
 
 /**
  * @title Flex-layout tables with toggle-able sticky headers, footers, and columns

src/assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MatButtonToggleGroup} from '@angular/material';
+import {MatButtonToggleGroup} from '@angular/material/button-toggle';
 
 /**
  * @title Tables with toggle-able sticky headers, footers, and columns

src/assets/angular-material-examples/table-wrapped/table-wrapped-example.ts

@@ -1,3 +1,4 @@
+import {DataSource} from '@angular/cdk/collections';
 import {
   AfterContentInit,
   Component,
@@ -7,15 +8,14 @@ import {
   QueryList,
   ViewChild
 } from '@angular/core';
+import {MatSort} from '@angular/material/sort';
 import {
   MatColumnDef,
   MatHeaderRowDef,
   MatRowDef,
-  MatSort,
   MatTable,
   MatTableDataSource
-} from '@angular/material';
+} from '@angular/material/table';
-import {DataSource} from '@angular/cdk/collections';
 
 export interface PeriodicElement {
   name: string;
@@ -49,7 +49,7 @@ export class TableWrappedExample implements OnInit {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
   dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
 
-  @ViewChild('sort') sort: MatSort;
+  @ViewChild('sort', {static: true}) sort: MatSort;
 
   ngOnInit() {
     this.dataSource.sort = this.sort;
@@ -74,7 +74,7 @@ export class WrapperTable<T> implements AfterContentInit {
   @ContentChildren(MatRowDef) rowDefs: QueryList<MatRowDef<T>>;
   @ContentChildren(MatColumnDef) columnDefs: QueryList<MatColumnDef>;
 
-  @ViewChild(MatTable) table: MatTable<T>;
+  @ViewChild(MatTable, {static: true}) table: MatTable<T>;
 
   @Input() columns: string[];
 

src/assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example.ts

@@ -1,5 +1,5 @@
 import {AutofillMonitor} from '@angular/cdk/text-field';
-import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 
 /** @title Monitoring autofill state with AutofillMonitor */
 @Component({
@@ -7,23 +7,23 @@ import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core
   templateUrl: './text-field-autofill-monitor-example.html',
   styleUrls: ['./text-field-autofill-monitor-example.css'],
 })
-export class TextFieldAutofillMonitorExample implements OnDestroy, OnInit {
+export class TextFieldAutofillMonitorExample implements AfterViewInit, OnDestroy {
-  @ViewChild('first', {read: ElementRef}) firstName: ElementRef<HTMLElement>;
+  @ViewChild('first', { read: ElementRef, static: false }) firstName: ElementRef<HTMLElement>;
-  @ViewChild('last', {read: ElementRef}) lastName: ElementRef<HTMLElement>;
+  @ViewChild('last', { read: ElementRef, static: false }) lastName: ElementRef<HTMLElement>;
   firstNameAutofilled: boolean;
   lastNameAutofilled: boolean;
 
-  constructor(private autofill: AutofillMonitor) {}
+  constructor(private _autofill: AutofillMonitor) {}
 
-  ngOnInit() {
+  ngAfterViewInit() {
-    this.autofill.monitor(this.firstName)
+    this._autofill.monitor(this.firstName)
         .subscribe(e => this.firstNameAutofilled = e.isAutofilled);
-    this.autofill.monitor(this.lastName)
+    this._autofill.monitor(this.lastName)
         .subscribe(e => this.lastNameAutofilled = e.isAutofilled);
   }
 
   ngOnDestroy() {
-    this.autofill.stopMonitoring(this.firstName);
+    this._autofill.stopMonitoring(this.firstName);
-    this.autofill.stopMonitoring(this.lastName);
+    this._autofill.stopMonitoring(this.lastName);
   }
 }

src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.css

@@ -1 +1,3 @@
-/** No CSS for this example */
+mat-form-field {
+  margin-right: 12px;
+}

src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.html

@@ -15,6 +15,6 @@
   <textarea matInput
             cdkTextareaAutosize
             #autosize="cdkTextareaAutosize"
-            cdkAutosizeMinRows="2"
+            cdkAutosizeMinRows="1"
             cdkAutosizeMaxRows="5"></textarea>
 </mat-form-field>

src/assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example.ts

@@ -9,13 +9,13 @@ import {take} from 'rxjs/operators';
   styleUrls: ['./text-field-autosize-textarea-example.css'],
 })
 export class TextFieldAutosizeTextareaExample {
-  constructor(private ngZone: NgZone) {}
+  constructor(private _ngZone: NgZone) {}
 
-  @ViewChild('autosize') autosize: CdkTextareaAutosize;
+  @ViewChild('autosize', {static: false}) autosize: CdkTextareaAutosize;
 
   triggerResize() {
     // Wait for changes to be applied, then trigger textarea resize.
-    this.ngZone.onStable.pipe(take(1))
+    this._ngZone.onStable.pipe(take(1))
         .subscribe(() => this.autosize.resizeToFitContent(true));
   }
 }

src/assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example.html

@@ -6,13 +6,13 @@
   <mat-toolbar-row>
     <span>Second Line</span>
     <span class="example-spacer"></span>
-    <mat-icon class="example-icon">verified_user</mat-icon>
+    <mat-icon class="example-icon" aria-hidden="false" aria-label="Example user verified icon">verified_user</mat-icon>
   </mat-toolbar-row>
 
   <mat-toolbar-row>
     <span>Third Line</span>
     <span class="example-spacer"></span>
-    <mat-icon class="example-icon">favorite</mat-icon>
+    <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">favorite</mat-icon>
-    <mat-icon class="example-icon">delete</mat-icon>
+    <mat-icon class="example-icon" aria-hidden="false" aria-label="Example delete icon">delete</mat-icon>
   </mat-toolbar-row>
 </mat-toolbar>

src/assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material';
+import {TooltipPosition} from '@angular/material/tooltip';
 
 /**
  * @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.

src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html

@@ -1,20 +1,20 @@
 <div>
-  <span> Mouse over to </span>
+  <span> Click the following buttons to... </span>
   <button mat-button
-          (mouseenter)="tooltip.show()"
+          (click)="tooltip.show()"
-          aria-label="Button that progamatically shows a tooltip on another button"
+          aria-label="Show tooltip on the button at the end of this section"
           class="example-action-button">
     show
   </button>
   <button mat-button
-          (mouseenter)="tooltip.hide()"
+          (click)="tooltip.hide()"
-          aria-label="Button that progamatically hides a tooltip on another button"
+          aria-label="Hide tooltip on the button at the end of this section"
           class="example-action-button">
     hide
   </button>
   <button mat-button
-          (mouseenter)="tooltip.toggle()"
+          (click)="tooltip.toggle()"
-          aria-label="Button that progamatically toggles a tooltip on another button to show/hide"
+          aria-label="Show/Hide tooltip on the button at the end of this section"
           class="example-action-button">
     toggle show/hide
   </button>

src/assets/angular-material-examples/tooltip-modified-defaults/tooltip-modified-defaults-example.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material';
+import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipDefaultOptions} from '@angular/material/tooltip';
 
 /** Custom options the configure the tooltip's default show/hide delays. */
 export const myCustomTooltipDefaults: MatTooltipDefaultOptions = {

src/assets/angular-material-examples/tooltip-position/tooltip-position-example.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {FormControl} from '@angular/forms';
-import {TooltipPosition} from '@angular/material';
+import {TooltipPosition} from '@angular/material/tooltip';
 
 /**
  * @title Tooltip with a custom position

src/assets/angular-material-examples/tree-checklist/tree-checklist-example.ts

@@ -131,13 +131,13 @@ export class TreeChecklistExample {
   /** The selection for checklist */
   checklistSelection = new SelectionModel<TodoItemFlatNode>(true /* multiple */);
 
-  constructor(private database: ChecklistDatabase) {
+  constructor(private _database: ChecklistDatabase) {
     this.treeFlattener = new MatTreeFlattener(this.transformer, this.getLevel,
       this.isExpandable, this.getChildren);
     this.treeControl = new FlatTreeControl<TodoItemFlatNode>(this.getLevel, this.isExpandable);
     this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 
-    database.dataChange.subscribe(data => {
+    _database.dataChange.subscribe(data => {
       this.dataSource.data = data;
     });
   }
@@ -251,13 +251,13 @@ export class TreeChecklistExample {
   /** Select the category so we can insert the new item. */
   addNewItem(node: TodoItemFlatNode) {
     const parentNode = this.flatNodeMap.get(node);
-    this.database.insertItem(parentNode!, '');
+    this._database.insertItem(parentNode!, '');
     this.treeControl.expand(node);
   }
 
   /** Save the node to database */
   saveNode(node: TodoItemFlatNode, itemValue: string) {
     const nestedNode = this.flatNodeMap.get(node);
-    this.database.updateItem(nestedNode!, itemValue);
+    this._database.updateItem(nestedNode!, itemValue);
   }
 }