fix(material-experimental/mdc-button): add getter/setter for extended property

Author: annieyw

src/dev-app/mdc-button/mdc-button-demo.html

@@ -37,8 +37,8 @@ <h4 class="demo-section-header">Anchors</h4>
     <a href="//www.google.com" mat-mini-fab>
       <mat-icon>check</mat-icon>
     </a>
-    <a href="//www.google.com" mat-fab [extended]="true">Search</a>
-    <a href="//www.google.com" mat-fab [extended]="true">
+    <a href="//www.google.com" mat-fab extended>Search</a>
+    <a href="//www.google.com" mat-fab extended>
       <mat-icon>check</mat-icon>
       Search
     </a>
@@ -54,8 +54,8 @@ <h4 class="demo-section-header">Anchors</h4>
     <a href="//www.google.com" disabled mat-mini-fab>
       <mat-icon>check</mat-icon>
     </a>
-    <a href="//www.google.com" disabled mat-fab [extended]="true">Search</a>
-    <a href="//www.google.com" disabled mat-fab [extended]="true">
+    <a href="//www.google.com" disabled mat-fab extended>Search</a>
+    <a href="//www.google.com" disabled mat-fab extended>
       <mat-icon>check</mat-icon>
       Search
     </a>
@@ -157,15 +157,15 @@ <h4 class="demo-section-header">Fab Buttons [mat-fab]</h4>
 
   <h4 class="demo-section-header">Extended Fab Buttons</h4>
   <section>
-    <button mat-fab [extended]="true">Extended</button>
-    <button mat-fab [extended]="true" color="primary">Extended</button>
-    <button mat-fab [extended]="true" color="accent">Extended</button>
-    <button mat-fab [extended]="true" color="warn">Extended</button>
-    <button mat-fab [extended]="true">
+    <button mat-fab extended>Extended</button>
+    <button mat-fab extended color="primary">Extended</button>
+    <button mat-fab extended color="accent">Extended</button>
+    <button mat-fab extended color="warn">Extended</button>
+    <button mat-fab extended>
       <mat-icon>home</mat-icon>
       Extended
     </button>
-    <button mat-fab [extended]="true">
+    <button mat-fab extended>
       <mat-icon>home</mat-icon>
       Extended
       <mat-icon iconPositionEnd>favorite</mat-icon>

src/material-experimental/mdc-button/button.spec.ts

@@ -95,14 +95,18 @@ describe('MDC-based MatButton', () => {
   });
 
   describe('button[mat-fab] extended', () => {
-    it('should have accent palette by default', () => {
+    it('should be extended', () => {
       const fixture = TestBed.createComponent(TestApp);
-      const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.mat-mdc-extended-fab'))!;
-
       fixture.detectChanges();
+      const extendedFabButtonDebugEl = fixture.debugElement.query(By.css('.extended-fab-test'))!;
+
+      expect(extendedFabButtonDebugEl.nativeElement.classList.contains('mat-mdc-extended-fab'))
+        .toBeFalse();
 
-      expect(extendedFabButtonDebugEl.nativeElement.classList)
-        .toContain('mat-accent', 'Expected extended fab buttons to use accent palette by default');
+      fixture.componentInstance.extended = true;
+
+      fixture.detectChanges();
+      expect(extendedFabButtonDebugEl.nativeElement.classList).toContain('mat-mdc-extended-fab');
     });
   });
 
@@ -293,7 +297,7 @@ describe('MDC-based MatButton', () => {
       Link
     </a>
     <button mat-fab>Fab Button</button>
-    <button mat-fab [extended]="true">Extended</button>
+    <button mat-fab [extended]="extended" class="extended-fab-test">Extended</button>
     <button mat-mini-fab>Mini Fab Button</button>
   `
 })
@@ -303,6 +307,7 @@ class TestApp {
   rippleDisabled: boolean = false;
   buttonColor: ThemePalette;
   tabIndex: number;
+  extended: boolean = false;
 
   increment() {
     this.clickCount++;

src/material-experimental/mdc-button/fab.ts

@@ -27,7 +27,7 @@ import {
   MatButtonBase
 } from './button-base';
 import {ThemePalette} from '@angular/material-experimental/mdc-core';
-import {BooleanInput} from '@angular/cdk/coercion';
+import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
 
 /**
  * Material Design floating action button (FAB) component. These buttons represent the primary
@@ -63,7 +63,9 @@ export class MatFabButton extends MatButtonBase {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
-  extended: boolean;
+  private _extended: boolean;
+  get extended(): boolean { return this._extended; }
+  set extended(value: boolean) { this._extended = coerceBooleanProperty(value); }
 
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,
@@ -141,7 +143,10 @@ export class MatFabAnchor extends MatAnchor {
   // The FAB by default has its color set to accent.
   color = 'accent' as ThemePalette;
 
-  extended: boolean;
+  private _extended: boolean;
+  get extended(): boolean { return this._extended; }
+  set extended(value: boolean) { this._extended = coerceBooleanProperty(value); }
+
 
   constructor(
       elementRef: ElementRef, platform: Platform, ngZone: NgZone,