feat: add camelCase selectors where they were missing (#4901)

src/lib/autocomplete/autocomplete.ts

@@ -29,7 +29,7 @@ export type AutocompletePositionY = 'above' | 'below';
   encapsulation: ViewEncapsulation.None,
   exportAs: 'mdAutocomplete',
   host: {
-    '[class.mat-autocomplete]': 'true'
+    'class': 'mat-autocomplete'
   }
 })
 export class MdAutocomplete implements AfterContentInit {

src/lib/button-toggle/button-toggle.ts

@@ -51,8 +51,8 @@ export class MdButtonToggleChange {
   selector: 'md-button-toggle-group:not([multiple]), mat-button-toggle-group:not([multiple])',
   providers: [MD_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR],
   host: {
-    '[class.mat-button-toggle-group]': 'true',
     'role': 'radiogroup',
+    'class': 'mat-button-toggle-group',
     '[class.mat-button-toggle-vertical]': 'vertical'
   },
   exportAs: 'mdButtonToggleGroup',
@@ -238,7 +238,7 @@ export class MdButtonToggleGroup implements AfterViewInit, ControlValueAccessor
   selector: 'md-button-toggle-group[multiple], mat-button-toggle-group[multiple]',
   exportAs: 'mdButtonToggleGroup',
   host: {
-    '[class.mat-button-toggle-group]': 'true',
+    'class': 'mat-button-toggle-group',
     '[class.mat-button-toggle-vertical]': 'vertical'
   }
 })
@@ -278,7 +278,7 @@ export class MdButtonToggleGroupMultiple {
   styleUrls: ['button-toggle.css'],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class.mat-button-toggle]': 'true'
+    'class': 'mat-button-toggle'
   }
 })
 export class MdButtonToggle implements OnInit {

src/lib/card/card.ts

@@ -21,8 +21,11 @@ export class MdCardContent {}
  * @docs-private
  */
 @Directive({
-  selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title]',
-  host: {'class': 'mat-card-title'}
+  selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title],' +
+  '[mdCardTitle], [matCardTitle]',
+  host: {
+    'class': 'mat-card-title '
+  }
 })
 export class MdCardTitle {}
 
@@ -31,8 +34,11 @@ export class MdCardTitle {}
  * @docs-private
  */
 @Directive({
-  selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle]',
-  host: {'class': 'mat-card-subtitle'}
+  selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle],' +
+  '[mdCardSubtitle], [matCardSubtitle]',
+  host: {
+    'class': 'mat-card-subtitle '
+  }
 })
 export class MdCardSubtitle {}
 
@@ -61,7 +67,17 @@ export class MdCardFooter {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-sm-image], [mat-card-sm-image]',
+  selector: '[md-card-image], [mat-card-image], [mdCardImage], [matCardImage]',
+  host: {'class': 'mat-card-image'}
+})
+export class MdCardImage {}
+
+/**
+ * Image used in a card, needed to add the mat- CSS styling.
+ * @docs-private
+ */
+@Directive({
+  selector: '[md-card-sm-image], [mat-card-sm-image], [mdCardImageSmall], [matCardImageSmall]',
   host: {'class': 'mat-card-sm-image'}
 })
 export class MdCardSmImage {}
@@ -71,7 +87,7 @@ export class MdCardSmImage {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-md-image], [mat-card-md-image]',
+  selector: '[md-card-md-image], [mat-card-md-image], [mdCardImageMedium], [matCardImageMedium]',
   host: {'class': 'mat-card-md-image'}
 })
 export class MdCardMdImage {}
@@ -81,27 +97,17 @@ export class MdCardMdImage {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-lg-image], [mat-card-lg-image]',
+  selector: '[md-card-lg-image], [mat-card-lg-image], [mdCardImageLarge], [matCardImageLarge]',
   host: {'class': 'mat-card-lg-image'}
 })
 export class MdCardLgImage {}
 
-/**
- * Image used in a card, needed to add the mat- CSS styling.
- * @docs-private
- */
-@Directive({
-  selector: '[md-card-image], [mat-card-image]',
-  host: {'class': 'mat-card-image'}
-})
-export class MdCardImage {}
-
 /**
  * Large image used in a card, needed to add the mat- CSS styling.
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-xl-image], [mat-card-xl-image]',
+  selector: '[md-card-xl-image], [mat-card-xl-image], [mdCardImageXLarge], [matCardImageXLarge]',
   host: {'class': 'mat-card-xl-image'}
 })
 export class MdCardXlImage {}
@@ -111,7 +117,7 @@ export class MdCardXlImage {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-card-avatar], [mat-card-avatar]',
+  selector: '[md-card-avatar], [mat-card-avatar], [mdCardAvatar], [matCardAvatar]',
   host: {'class': 'mat-card-avatar'}
 })
 export class MdCardAvatar {}

src/lib/chips/chip-list.ts

@@ -33,7 +33,7 @@ import {Subscription} from 'rxjs/Subscription';
     // Properties
     '[attr.tabindex]': '_tabIndex',
     'role': 'listbox',
-    '[class.mat-chip-list]': 'true',
+    'class': 'mat-chip-list',
 
     // Events
     '(focus)': 'focus()',

src/lib/core/compatibility/compatibility.ts

@@ -15,25 +15,25 @@ export function getMdCompatibilityInvalidPrefixError(prefix: string, nodeName: s
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MAT_ELEMENTS_SELECTOR = `
   [mat-button],
-  [mat-card-subtitle],
-  [mat-card-title],
-  [mat-dialog-actions],
-  [mat-dialog-close],
-  [mat-dialog-content],
-  [mat-dialog-title],
   [mat-fab],
   [mat-icon-button],
-  [mat-menu-trigger-for],
   [mat-mini-fab],
   [mat-raised-button],
-  [mat-tab-label],
-  [mat-tab-link],
-  [mat-tab-nav-bar],
+  [matCardSubtitle],
+  [matCardTitle],
+  [matDialogActions],
+  [matDialogClose],
+  [matDialogContent],
+  [matDialogTitle],
+  [matLine],
+  [matTabLabel],
+  [matTabLink],
+  [matTabNav],
   [matTooltip],
   mat-autocomplete,
   mat-button-toggle,
-  mat-button-toggle-group,
   mat-button-toggle,
+  mat-button-toggle-group,
   mat-card,
   mat-card-actions,
   mat-card-content,
@@ -48,6 +48,7 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-dialog-container,
   mat-dialog-content,
   mat-divider,
+  mat-error,
   mat-grid-list,
   mat-grid-tile,
   mat-grid-tile-footer,
@@ -71,31 +72,30 @@ export const MAT_ELEMENTS_SELECTOR = `
   mat-spinner,
   mat-tab,
   mat-tab-group,
-  mat-toolbar,
-  mat-error`;
+  mat-toolbar`;
 
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MD_ELEMENTS_SELECTOR = `
   [md-button],
-  [md-card-subtitle],
-  [md-card-title],
-  [md-dialog-actions],
-  [md-dialog-close],
-  [md-dialog-content],
-  [md-dialog-title],
   [md-fab],
   [md-icon-button],
-  [md-menu-trigger-for],
   [md-mini-fab],
   [md-raised-button],
-  [md-tab-label],
-  [md-tab-link],
-  [md-tab-nav-bar],
+  [mdCardSubtitle],
+  [mdCardTitle],
+  [mdDialogActions],
+  [mdDialogClose],
+  [mdDialogContent],
+  [mdDialogTitle],
+  [mdLine],
+  [mdTabLabel],
+  [mdTabLink],
+  [mdTabNav],
   [mdTooltip],
   md-autocomplete,
   md-button-toggle,
-  md-button-toggle-group,
   md-button-toggle,
+  md-button-toggle-group,
   md-card,
   md-card-actions,
   md-card-content,
@@ -110,6 +110,7 @@ export const MD_ELEMENTS_SELECTOR = `
   md-dialog-container,
   md-dialog-content,
   md-divider,
+  md-error,
   md-grid-list,
   md-grid-tile,
   md-grid-tile-footer,
@@ -133,8 +134,7 @@ export const MD_ELEMENTS_SELECTOR = `
   md-spinner,
   md-tab,
   md-tab-group,
-  md-toolbar,
-  md-error`;
+  md-toolbar`;
 
 /** Directive that enforces that the `mat-` prefix cannot be used. */
 @Directive({selector: MAT_ELEMENTS_SELECTOR})

src/lib/core/line/line.ts

@@ -14,10 +14,8 @@ import {MdCommonModule} from '../common-behaviors/common-module';
  * counted by checking the query list's length.
  */
 @Directive({
-  selector: '[md-line], [mat-line]',
-  host: {
-    '[class.mat-line]': 'true'
-  }
+  selector: '[md-line], [mat-line], [mdLine], [matLine]',
+  host: {'class': 'mat-line'}
 })
 export class MdLine {}
 

src/lib/core/option/option.ts

@@ -44,7 +44,7 @@ export class MdOptionSelectionChange {
     '[class.mat-option-disabled]': 'disabled',
     '(click)': '_selectViaInteraction()',
     '(keydown)': '_handleKeydown($event)',
-    '[class.mat-option]': 'true',
+    'class': 'mat-option',
   },
   templateUrl: 'option.html',
   encapsulation: ViewEncapsulation.None

src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts

@@ -36,7 +36,7 @@ export const _MdPseudoCheckboxBase = mixinColor(MdPseudoCheckboxBase, 'accent');
   inputs: ['color'],
   template: '',
   host: {
-    '[class.mat-pseudo-checkbox]': 'true',
+    'class': 'mat-pseudo-checkbox',
     '[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
     '[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',

src/lib/datepicker/calendar.ts

@@ -39,7 +39,7 @@ import {MATERIAL_COMPATIBILITY_MODE} from '../core';
   templateUrl: 'calendar.html',
   styleUrls: ['calendar.css'],
   host: {
-    '[class.mat-calendar]': 'true',
+    'class': 'mat-calendar',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

src/lib/dialog/dialog-container.ts

@@ -56,7 +56,7 @@ export function throwMdDialogContentAlreadyAttachedError() {
     ])
   ],
   host: {
-    '[class.mat-dialog-container]': 'true',
+    'class': 'mat-dialog-container',
     '[attr.role]': '_config?.role',
     '[@slideDialog]': '_state',
     '(@slideDialog.done)': '_onAnimationDone($event)',

src/lib/dialog/dialog-content-directives.ts

@@ -6,7 +6,8 @@ import {MdDialogRef} from './dialog-ref';
  * Button that will close the current dialog.
  */
 @Directive({
-  selector: 'button[md-dialog-close], button[mat-dialog-close]',
+  selector: 'button[md-dialog-close], button[mat-dialog-close],' +
+            'button[mdDialogClose], button[matDialogClose]',
   host: {
     '(click)': 'dialogRef.close(dialogResult)',
     '[attr.aria-label]': 'ariaLabel',
@@ -30,10 +31,8 @@ export class MdDialogClose {
  * Title of a dialog element. Stays fixed to the top of the dialog when scrolling.
  */
 @Directive({
-  selector: '[md-dialog-title], [mat-dialog-title]',
-  host: {
-    '[class.mat-dialog-title]': 'true'
-  }
+  selector: '[md-dialog-title], [mat-dialog-title], [mdDialogTitle], [matDialogTitle]',
+  host: {'class': 'mat-dialog-title'},
 })
 export class MdDialogTitle { }
 
@@ -42,10 +41,9 @@ export class MdDialogTitle { }
  * Scrollable content container of a dialog.
  */
 @Directive({
-  selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content',
-  host: {
-    '[class.mat-dialog-content]': 'true'
-  }
+  selector: '[md-dialog-content], md-dialog-content, [mat-dialog-content], mat-dialog-content,' +
+            '[mdDialogContent], [matDialogContent]',
+  host: {'class': 'mat-dialog-content'}
 })
 export class MdDialogContent { }
 
@@ -55,9 +53,8 @@ export class MdDialogContent { }
  * Stays fixed to the bottom when scrolling.
  */
 @Directive({
-  selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions',
-  host: {
-    '[class.mat-dialog-actions]': 'true'
-  }
+  selector: '[md-dialog-actions], md-dialog-actions, [mat-dialog-actions], mat-dialog-actions,' +
+            '[mdDialogActions], [matDialogActions]',
+  host: {'class': 'mat-dialog-actions'}
 })
 export class MdDialogActions { }

src/lib/grid-list/grid-list.ts

@@ -33,7 +33,7 @@ const MD_FIT_MODE = 'fit';
   styleUrls: ['grid-list.css'],
   host: {
     'role': 'list',
-    '[class.mat-grid-list]': 'true',
+    'class': 'mat-grid-list',
   },
   encapsulation: ViewEncapsulation.None,
 })

src/lib/grid-list/grid-tile.ts

@@ -16,7 +16,7 @@ import {coerceToNumber} from './grid-list-measure';
   selector: 'md-grid-tile, mat-grid-tile',
   host: {
     'role': 'listitem',
-    '[class.mat-grid-tile]': 'true',
+    'class': 'mat-grid-tile',
   },
   templateUrl: 'grid-tile.html',
   styleUrls: ['grid-list.css'],
@@ -72,10 +72,8 @@ export class MdGridTileText implements AfterContentInit {
  * @docs-private
  */
 @Directive({
-  selector: '[md-grid-avatar], [mat-grid-avatar]',
-  host: {
-    '[class.mat-grid-avatar]': 'true'
-  }
+  selector: '[md-grid-avatar], [mat-grid-avatar], [mdGridAvatar], [matGridAvatar]',
+  host: {'class': 'mat-grid-avatar'}
 })
 export class MdGridAvatarCssMatStyler {}
 
@@ -85,9 +83,7 @@ export class MdGridAvatarCssMatStyler {}
  */
 @Directive({
   selector: 'md-grid-tile-header, mat-grid-tile-header',
-  host: {
-    '[class.mat-grid-tile-header]': 'true'
-  }
+  host: {'class': 'mat-grid-tile-header'}
 })
 export class MdGridTileHeaderCssMatStyler {}
 
@@ -97,8 +93,6 @@ export class MdGridTileHeaderCssMatStyler {}
  */
 @Directive({
   selector: 'md-grid-tile-footer, mat-grid-tile-footer',
-  host: {
-    '[class.mat-grid-tile-footer]': 'true'
-  }
+  host: {'class': 'mat-grid-tile-footer'}
 })
 export class MdGridTileFooterCssMatStyler {}

src/lib/icon/icon.ts

@@ -62,7 +62,7 @@ export const _MdIconMixinBase = mixinColor(MdIconBase);
   inputs: ['color'],
   host: {
     'role': 'img',
-    'class': 'mat-icon'
+    'class': 'mat-icon',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

src/lib/input/autosize.ts

@@ -19,8 +19,7 @@ export class MdTextareaAutosize implements AfterViewInit {
   private _minRows: number;
   private _maxRows: number;
 
-  /** @deprecated Use mdAutosizeMinRows */
-  @Input()
+  @Input('mdAutosizeMinRows')
   get minRows() { return this._minRows; }
 
   set minRows(value: number) {
@@ -28,24 +27,20 @@ export class MdTextareaAutosize implements AfterViewInit {
     this._setMinHeight();
   }
 
-  /** @deprecated Use mdAutosizeMaxRows */
-  @Input()
+  @Input('mdAutosizeMaxRows')
   get maxRows() { return this._maxRows; }
-
   set maxRows(value: number) {
     this._maxRows = value;
     this._setMaxHeight();
   }
 
-  /** Minimum number of rows for this textarea. */
-  @Input()
-  get mdAutosizeMinRows(): number { return this.minRows; }
-  set mdAutosizeMinRows(value: number) { this.minRows = value; }
+  @Input('matAutosizeMaxRows')
+  get _matAutosizeMinRows() { return this.minRows; }
+  set _matAutosizeMinRows(v) { this.minRows = v; }
 
-  /** Maximum number of rows for this textarea. */
-  @Input()
-  get mdAutosizeMaxRows(): number { return this.maxRows; }
-  set mdAutosizeMaxRows(value: number) { this.maxRows = value; }
+  @Input('matAutosizeMaxRows')
+  get _matAutosizeMaxRows() { return this.maxRows; }
+  set _matAutosizeMaxRows(v) { this.maxRows = v; }
 
   /** Cached height of a textarea with a single row. */
   private _cachedLineHeight: number;

src/lib/input/input-container.ts

@@ -66,7 +66,7 @@ export class MdPlaceholder {}
 @Directive({
   selector: 'md-hint, mat-hint',
   host: {
-    '[class.mat-hint]': 'true',
+    'class': 'mat-hint',
     '[class.mat-right]': 'align == "end"',
     '[attr.id]': 'id',
   }
@@ -83,7 +83,7 @@ export class MdHint {
 @Directive({
   selector: 'md-error, mat-error',
   host: {
-    '[class.mat-input-error]': 'true'
+    'class': 'mat-input-error'
   }
 })
 export class MdErrorDirective { }
@@ -106,7 +106,7 @@ export class MdSuffix {}
 @Directive({
   selector: `input[mdInput], textarea[mdInput], input[matInput], textarea[matInput]`,
   host: {
-    '[class.mat-input-element]': 'true',
+    'class': 'mat-input-element',
     // Native input properties that are overwritten by Angular inputs need to be synced with
     // the native input element. Otherwise property bindings for those don't work.
     '[id]': 'id',
@@ -298,7 +298,7 @@ export class MdInputDirective {
   host: {
     // Remove align attribute to prevent it from interfering with layout.
     '[attr.align]': 'null',
-    '[class.mat-input-container]': 'true',
+    'class': 'mat-input-container',
     '[class.mat-input-invalid]': '_mdInputChild._isErrorState()',
     '[class.mat-focused]': '_mdInputChild.focused',
     '[class.ng-untouched]': '_shouldForward("untouched")',

src/lib/list/list.spec.ts

@@ -100,7 +100,9 @@ describe('MdList', () => {
     fixture.detectChanges();
 
     let listItem = fixture.debugElement.children[0].query(By.css('md-list-item'));
-    expect(listItem.nativeElement.className).toBe('mat-2-line mat-list-item');
+    expect(listItem.nativeElement.classList.length).toBe(2);
+    expect(listItem.nativeElement.classList).toContain('mat-2-line');
+    expect(listItem.nativeElement.classList).toContain('mat-list-item');
 
     fixture.debugElement.componentInstance.showThirdLine = true;
     fixture.detectChanges();

src/lib/list/list.ts

@@ -25,9 +25,7 @@ export class MdListDivider {}
 @Component({
   moduleId: module.id,
   selector: 'md-list, mat-list, md-nav-list, mat-nav-list',
-  host: {
-    'role': 'list'
-  },
+  host: {'role': 'list'},
   template: '<ng-content></ng-content>',
   styleUrls: ['list.css'],
   encapsulation: ViewEncapsulation.None
@@ -50,9 +48,7 @@ export class MdList {
  */
 @Directive({
   selector: 'md-list, mat-list',
-  host: {
-    '[class.mat-list]': 'true'
-  }
+  host: {'class': 'mat-list'}
 })
 export class MdListCssMatStyler {}
 
@@ -62,9 +58,7 @@ export class MdListCssMatStyler {}
  */
 @Directive({
   selector: 'md-nav-list, mat-nav-list',
-  host: {
-    '[class.mat-nav-list]': 'true'
-  }
+  host: {'class': 'mat-nav-list'}
 })
 export class MdNavListCssMatStyler {}
 
@@ -74,9 +68,7 @@ export class MdNavListCssMatStyler {}
  */
 @Directive({
   selector: 'md-divider, mat-divider',
-  host: {
-    '[class.mat-divider]': 'true'
-  }
+  host: {'class': 'mat-divider'}
 })
 export class MdDividerCssMatStyler {}
 
@@ -85,10 +77,8 @@ export class MdDividerCssMatStyler {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-list-avatar], [mat-list-avatar]',
-  host: {
-    '[class.mat-list-avatar]': 'true'
-  }
+  selector: '[md-list-avatar], [mat-list-avatar], [mdListAvatar], [matListAvatar]',
+  host: {'class': 'mat-list-avatar'}
 })
 export class MdListAvatarCssMatStyler {}
 
@@ -97,10 +87,8 @@ export class MdListAvatarCssMatStyler {}
  * @docs-private
  */
 @Directive({
-  selector: '[md-list-icon], [mat-list-icon]',
-  host: {
-    '[class.mat-list-icon]': 'true'
-  }
+  selector: '[md-list-icon], [mat-list-icon], [mdListIcon], [matListIcon]',
+  host: {'class': 'mat-list-icon'}
 })
 export class MdListIconCssMatStyler {}
 
@@ -110,9 +98,7 @@ export class MdListIconCssMatStyler {}
  */
 @Directive({
   selector: '[md-subheader], [mat-subheader]',
-  host: {
-    '[class.mat-subheader]': 'true'
-  }
+  host: {'class': 'mat-subheader'}
 })
 export class MdListSubheaderCssMatStyler {}
 
@@ -121,9 +107,9 @@ export class MdListSubheaderCssMatStyler {}
   selector: 'md-list-item, mat-list-item, a[md-list-item], a[mat-list-item]',
   host: {
     'role': 'listitem',
+    'class': 'mat-list-item',
     '(focus)': '_handleFocus()',
     '(blur)': '_handleBlur()',
-    '[class.mat-list-item]': 'true',
   },
   templateUrl: 'list-item.html',
   encapsulation: ViewEncapsulation.None

src/lib/menu/menu-item.ts

@@ -11,7 +11,7 @@ import {coerceBooleanProperty} from '../core/coercion/boolean-property';
   selector: '[md-menu-item], [mat-menu-item]',
   host: {
     'role': 'menuitem',
-    '[class.mat-menu-item]': 'true',
+    'class': 'mat-menu-item',
     '[attr.tabindex]': '_getTabIndex()',
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.disabled]': '_getDisabledAttr()',

src/lib/progress-bar/progress-bar.ts

@@ -22,7 +22,7 @@ import {
     '[class.mat-primary]': 'color == "primary"',
     '[class.mat-accent]': 'color == "accent"',
     '[class.mat-warn]': 'color == "warn"',
-    '[class.mat-progress-bar]': 'true',
+    'class': 'mat-progress-bar',
   },
   templateUrl: 'progress-bar.html',
   styleUrls: ['progress-bar.css'],

src/lib/progress-spinner/progress-spinner.ts

@@ -44,9 +44,7 @@ type EasingFn = (currentTime: number, startValue: number,
  */
 @Directive({
   selector: 'md-progress-spinner, mat-progress-spinner',
-  host: {
-    '[class.mat-progress-spinner]': 'true'
-  }
+  host: {'class': 'mat-progress-spinner'}
 })
 export class MdProgressSpinnerCssMatStyler {}
 
@@ -270,7 +268,7 @@ export class MdProgressSpinner extends _MdProgressSpinnerMixinBase
   host: {
     'role': 'progressbar',
     'mode': 'indeterminate',
-    '[class.mat-spinner]': 'true',
+    'class': 'mat-spinner',
   },
   inputs: ['color'],
   templateUrl: 'progress-spinner.html',

src/lib/radio/radio.ts

@@ -66,7 +66,7 @@ export const _MdRadioGroupMixinBase = mixinDisabled(MdRadioGroupBase);
   providers: [MD_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
   host: {
     'role': 'radiogroup',
-    '[class.mat-radio-group]': 'true',
+    'class': 'mat-radio-group',
   },
   inputs: ['disabled'],
 })
@@ -307,7 +307,7 @@ export const _MdRadioButtonMixinBase = mixinColor(MdRadioButtonBase, 'accent');
   inputs: ['color'],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class.mat-radio-button]': 'true',
+    'class': 'mat-radio-button',
     '[class.mat-radio-checked]': 'checked',
     '[class.mat-radio-disabled]': 'disabled',
     '[attr.id]': 'id',

src/lib/select/select.ts

@@ -125,7 +125,7 @@ export const _MdSelectMixinBase = mixinColor(MdSelectBase, 'primary');
     '[attr.aria-invalid]': '_control?.invalid || "false"',
     '[attr.aria-owns]': '_optionIds',
     '[class.mat-select-disabled]': 'disabled',
-    '[class.mat-select]': 'true',
+    'class': 'mat-select',
     '(keydown)': '_handleClosedKeydown($event)',
     '(blur)': '_onBlur()',
   },

src/lib/sidenav/sidenav.ts

@@ -46,7 +46,7 @@ export class MdSidenavToggleResult {
   // TODO(mmalerba): move template to separate file.
   templateUrl: 'sidenav.html',
   host: {
-    '[class.mat-sidenav]': 'true',
+    'class': 'mat-sidenav',
     '(transitionend)': '_onTransitionEnd($event)',
     '(keydown)': 'handleKeydown($event)',
     // must prevent the browser from aligning text based on value
@@ -324,7 +324,7 @@ export class MdSidenav implements AfterContentInit, OnDestroy {
     'sidenav-transitions.css',
   ],
   host: {
-    '[class.mat-sidenav-container]': 'true',
+    'class': 'mat-sidenav-container',
     '[class.mat-sidenav-transition]': '_enableTransitions',
   },
   encapsulation: ViewEncapsulation.None,

src/lib/snack-bar/simple-snack-bar.ts

@@ -13,7 +13,7 @@ import {MdSnackBarRef} from './snack-bar-ref';
   styleUrls: ['simple-snack-bar.css'],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class.mat-simple-snackbar]': 'true',
+    'class': 'mat-simple-snackbar',
   }
 })
 export class SimpleSnackBar {

src/lib/tabs/index.ts

@@ -7,7 +7,7 @@ import {MdTab} from './tab';
 import {MdTabGroup} from './tab-group';
 import {MdTabLabel} from './tab-label';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
-import {MdTabNavBar, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
+import {MdTabNav, MdTabLink, MdTabLinkRipple} from './tab-nav-bar/tab-nav-bar';
 import {MdInkBar} from './ink-bar';
 import {MdTabBody} from './tab-body';
 import {VIEWPORT_RULER_PROVIDER} from '../core/overlay/position/viewport-ruler';
@@ -28,7 +28,7 @@ import {ScrollDispatchModule} from '../core/overlay/scroll/index';
     MdTabGroup,
     MdTabLabel,
     MdTab,
-    MdTabNavBar,
+    MdTabNav,
     MdTabLink,
     MdTabLinkRipple
   ],
@@ -38,7 +38,7 @@ import {ScrollDispatchModule} from '../core/overlay/scroll/index';
     MdTab,
     MdInkBar,
     MdTabLabelWrapper,
-    MdTabNavBar,
+    MdTabNav,
     MdTabLink,
     MdTabBody,
     MdTabLinkRipple,
@@ -56,3 +56,4 @@ export {MdTabHeader, ScrollDirection} from './tab-header';
 export {MdTabLabelWrapper} from './tab-label-wrapper';
 export {MdTab} from './tab';
 export {MdTabLabel} from './tab-label';
+export {MdTabNav, MdTabLink} from './tab-nav-bar/index';

src/lib/tabs/ink-bar.ts

@@ -8,7 +8,7 @@ import {Directive, Renderer2, ElementRef, NgZone} from '@angular/core';
 @Directive({
   selector: 'md-ink-bar, mat-ink-bar',
   host: {
-    '[class.mat-ink-bar]': 'true',
+    'class': 'mat-ink-bar',
   },
 })
 export class MdInkBar {

src/lib/tabs/tab-body.ts

@@ -53,7 +53,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
   styleUrls: ['tab-body.css'],
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[class.mat-tab-body]': 'true',
+    'class': 'mat-tab-body',
   },
   animations: [
     trigger('translateTab', [

src/lib/tabs/tab-group.ts

@@ -38,7 +38,7 @@ export type MdTabHeaderPosition = 'above' | 'below';
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
   host: {
-    '[class.mat-tab-group]': 'true',
+    'class': 'mat-tab-group',
     '[class.mat-tab-group-dynamic-height]': 'dynamicHeight',
     '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
   }

src/lib/tabs/tab-label.ts

@@ -3,7 +3,7 @@ import {TemplatePortalDirective} from '../core';
 
 /** Used to flag tab labels for use with the portal directive */
 @Directive({
-  selector: '[md-tab-label], [mat-tab-label]',
+  selector: '[md-tab-label], [mat-tab-label], [mdTabLabel], [matTabLabel]',
 })
 export class MdTabLabel extends TemplatePortalDirective {
   constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -1,6 +1,6 @@
 import {async, ComponentFixture, fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {MdTabsModule} from '../index';
-import {MdTabNavBar} from './tab-nav-bar';
+import {MdTabNav} from './tab-nav-bar';
 import {Component, ViewChild} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
@@ -131,7 +131,7 @@ describe('MdTabNavBar', () => {
   `
 })
 class SimpleTabNavBarTestApp {
-  @ViewChild(MdTabNavBar) tabNavBar: MdTabNavBar;
+  @ViewChild(MdTabNav) tabNavBar: MdTabNav;
 
   label = '';
   tabs = [0, 1, 2];

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -28,13 +28,13 @@ import {Subject} from 'rxjs/Subject';
  */
 @Component({
   moduleId: module.id,
-  selector: '[md-tab-nav-bar], [mat-tab-nav-bar]',
+  selector: '[md-tab-nav-bar], [mat-tab-nav-bar], [mdTabNav], [matTabNav]',
   templateUrl: 'tab-nav-bar.html',
   styleUrls: ['tab-nav-bar.css'],
   host: {'class': 'mat-tab-nav-bar'},
   encapsulation: ViewEncapsulation.None,
 })
-export class MdTabNavBar implements AfterContentInit, OnDestroy {
+export class MdTabNav implements AfterContentInit, OnDestroy {
   /** Subject that emits when the component has been destroyed. */
   private _onDestroy = new Subject<void>();
 
@@ -88,7 +88,7 @@ export class MdTabNavBar implements AfterContentInit, OnDestroy {
  * Link inside of a `md-tab-nav-bar`.
  */
 @Directive({
-  selector: '[md-tab-link], [mat-tab-link]',
+  selector: '[md-tab-link], [mat-tab-link], [mdTabLink], [matTabLink]',
   host: {'class': 'mat-tab-link'}
 })
 export class MdTabLink {
@@ -104,7 +104,7 @@ export class MdTabLink {
     }
   }
 
-  constructor(private _mdTabNavBar: MdTabNavBar, private _elementRef: ElementRef) {}
+  constructor(private _mdTabNavBar: MdTabNav, private _elementRef: ElementRef) {}
 }
 
 /**
@@ -112,8 +112,7 @@ export class MdTabLink {
  * adds the ripple behavior to nav bar labels.
  */
 @Directive({
-  selector: '[md-tab-link], [mat-tab-link]',
-  host: {'class': 'mat-tab-link'},
+  selector: '[md-tab-link], [mat-tab-link], [mdTabLink], [matTabLink]',
 })
 export class MdTabLinkRipple extends MdRipple {
   constructor(

src/lib/toolbar/toolbar.ts

@@ -11,9 +11,7 @@ import {CanColor, mixinColor} from '../core/common-behaviors/color';
 
 @Directive({
   selector: 'md-toolbar-row, mat-toolbar-row',
-  host: {
-    '[class.mat-toolbar-row]': 'true',
-  },
+  host: {'class': 'mat-toolbar-row'},
 })
 export class MdToolbarRow {}
 
@@ -31,7 +29,7 @@ export const _MdToolbarMixinBase = mixinColor(MdToolbarBase);
   styleUrls: ['toolbar.css'],
   inputs: ['color'],
   host: {
-    '[class.mat-toolbar]': 'true',
+    'class': 'mat-toolbar',
     'role': 'toolbar'
   },
   changeDetection: ChangeDetectionStrategy.OnPush,