put button HTML into file

Author: andrewseguin

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

@@ -22,17 +22,6 @@ import {
   RippleTarget
 } from '@angular/material/core';
 
-/** Shared template to be used by the standard button, FAB, and icon button. */
-export const MAT_BUTTON_TEMPLATE = `
-  <ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])">
-  </ng-content>
-
-  <span class="mdc-button__label"><ng-content></ng-content></span>
-
-  <ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]">
-  </ng-content>
-`;
-
 /** Inputs common to all buttons. */
 export const MAT_BUTTON_INPUTS = ['disabled', 'disableRipple', 'color'];
 

src/material-experimental/mdc-button/button.html

@@ -0,0 +1,7 @@
+<ng-content select=".material-icons:not([iconPositionEnd]), mat-icon:not([iconPositionEnd])">
+</ng-content>
+
+<span class="mdc-button__label"><ng-content></ng-content></span>
+
+<ng-content select=".material-icons[iconPositionEnd], mat-icon[iconPositionEnd]">
+</ng-content>

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

@@ -23,7 +23,6 @@ import {
   MAT_ANCHOR_INPUTS,
   MAT_BUTTON_HOST,
   MAT_BUTTON_INPUTS,
-  MAT_BUTTON_TEMPLATE,
   MatAnchorBase,
   MatButtonBase
 } from './button-base';
@@ -35,7 +34,7 @@ import {
     button[mat-button], button[mat-raised-button], button[mat-flat-button],
     button[mat-stroked-button]
   `,
-  template: MAT_BUTTON_TEMPLATE,
+  templateUrl: 'button.html',
   styleUrls: ['button.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
@@ -57,7 +56,7 @@ export class MatButton extends MatButtonBase {
   exportAs: 'matButton, matAnchor',
   host: MAT_ANCHOR_HOST,
   inputs: MAT_ANCHOR_INPUTS,
-  template: MAT_BUTTON_TEMPLATE,
+  templateUrl: 'button.html',
   styleUrls: ['button.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

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

@@ -24,15 +24,14 @@ import {
   MAT_ANCHOR_INPUTS,
   MAT_BUTTON_HOST,
   MAT_BUTTON_INPUTS,
-  MAT_BUTTON_TEMPLATE,
   MatButtonBase
 } from './button-base';
 
 
 @Component({
   moduleId: module.id,
   selector: `button[mat-fab], button[mat-mini-fab]`,
-  template: MAT_BUTTON_TEMPLATE,
+  templateUrl: 'button.html',
   styleUrls: ['fab.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
@@ -51,7 +50,7 @@ export class MatFabButton extends MatButtonBase {
 @Component({
   moduleId: module.id,
   selector: `a[mat-fab], a[mat-mini-fab]`,
-  template: MAT_BUTTON_TEMPLATE,
+  templateUrl: 'button.html',
   styleUrls: ['fab.css'],
   inputs: MAT_ANCHOR_INPUTS,
   host: MAT_ANCHOR_HOST,

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

@@ -23,7 +23,6 @@ import {
   MAT_ANCHOR_INPUTS,
   MAT_BUTTON_HOST,
   MAT_BUTTON_INPUTS,
-  MAT_BUTTON_TEMPLATE,
   MatAnchorBase,
   MatButtonBase
 } from './button-base';
@@ -32,7 +31,7 @@ import {
 @Component({
   moduleId: module.id,
   selector: `button[mat-icon-button]`,
-  template: MAT_BUTTON_TEMPLATE,
+  templateUrl: 'button.html',
   styleUrls: ['icon-button.css'],
   inputs: MAT_BUTTON_INPUTS,
   host: MAT_BUTTON_HOST,
@@ -53,7 +52,7 @@ export class MatIconButton extends MatButtonBase {
 @Component({
   moduleId: module.id,
   selector: `a[mat-icon-button]`,
-  template: MAT_BUTTON_TEMPLATE,
+  templateUrl: 'button.html',
   styleUrls: ['icon-button.css'],
   inputs: MAT_ANCHOR_INPUTS,
   host: MAT_ANCHOR_HOST,