diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts
index 00122a70363e..7038678a2c7f 100644
--- a/src/lib/core/compatibility/compatibility.ts
+++ b/src/lib/core/compatibility/compatibility.ts
@@ -19,12 +19,15 @@ export const MAT_ELEMENTS_SELECTOR = `
[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],
+ [matTooltip],
mat-autocomplete,
+ mat-button-toggle,
mat-button-toggle-group,
mat-button-toggle,
mat-card,
@@ -56,6 +59,7 @@ export const MAT_ELEMENTS_SELECTOR = `
mat-placeholder,
mat-progress-bar,
mat-progress-circle,
+ mat-pseudo-checkbox,
mat-radio-button,
mat-radio-group,
mat-select,
@@ -64,9 +68,10 @@ export const MAT_ELEMENTS_SELECTOR = `
mat-slider,
mat-spinner,
mat-tab,
+ mat-tab-body,
+ mat-tab-header,
mat-tab-group,
- mat-toolbar,
- matTooltip`;
+ mat-toolbar`;
/** Selector that matches all elements that may have style collisions with AngularJS Material. */
export const MD_ELEMENTS_SELECTOR = `
@@ -77,12 +82,15 @@ export const MD_ELEMENTS_SELECTOR = `
[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],
+ [mdTooltip],
md-autocomplete,
+ md-button-toggle,
md-button-toggle-group,
md-button-toggle,
md-card,
@@ -114,6 +122,7 @@ export const MD_ELEMENTS_SELECTOR = `
md-placeholder,
md-progress-bar,
md-progress-circle,
+ md-pseudo-checkbox,
md-radio-button,
md-radio-group,
md-select,
@@ -122,9 +131,10 @@ export const MD_ELEMENTS_SELECTOR = `
md-slider,
md-spinner,
md-tab,
+ md-tab-body,
+ md-tab-header,
md-tab-group,
- md-toolbar,
- mdTooltip`;
+ md-toolbar`;
/** Directive that enforces that the `mat-` prefix cannot be used. */
@Directive({selector: MAT_ELEMENTS_SELECTOR})
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
index fbb47a5f39b6..d98bcf1b55c6 100644
--- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
+++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
@@ -22,7 +22,7 @@ export type MdPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
@Component({
moduleId: module.id,
encapsulation: ViewEncapsulation.None,
- selector: 'md-pseudo-checkbox',
+ selector: 'md-pseudo-checkbox, mat-pseudo-checkbox',
styleUrls: ['pseudo-checkbox.css'],
template: '',
host: {
diff --git a/src/lib/input/input-container.html b/src/lib/input/input-container.html
index 56654847cf6e..13f341072051 100644
--- a/src/lib/input/input-container.html
+++ b/src/lib/input/input-container.html
@@ -1,6 +1,9 @@
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index d295603a2a58..aac7d0bd034f 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -30,9 +30,11 @@ import {MenuPositionX, MenuPositionY} from './menu-positions';
/**
* This directive is intended to be used in conjunction with an md-menu tag. It is
* responsible for toggling the display of the provided menu instance.
+ * TODO(andrewseguin): Remove the kebab versions in favor of camelCased attribute selectors
*/
@Directive({
- selector: '[md-menu-trigger-for], [mat-menu-trigger-for], [mdMenuTriggerFor]',
+ selector: `[md-menu-trigger-for], [mat-menu-trigger-for],
+ [mdMenuTriggerFor], [matMenuTriggerFor]`,
host: {
'aria-haspopup': 'true',
'(mousedown)': '_handleMousedown($event)',
@@ -53,8 +55,18 @@ export class MdMenuTrigger implements AfterViewInit, OnDestroy {
/** @deprecated */
@Input('md-menu-trigger-for')
- get _deprecatedMenuTriggerFor(): MdMenuPanel { return this.menu; }
- set _deprecatedMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
+ get _deprecatedMdMenuTriggerFor(): MdMenuPanel { return this.menu; }
+ set _deprecatedMdMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
+
+ /** @deprecated */
+ @Input('mat-menu-trigger-for')
+ get _deprecatedMatMenuTriggerFor(): MdMenuPanel { return this.menu; }
+ set _deprecatedMatMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
+
+ // Trigger input for compatibility mode
+ @Input('matMenuTriggerFor')
+ get _matMenuTriggerFor(): MdMenuPanel { return this.menu; }
+ set _matMenuTriggerFor(v: MdMenuPanel) { this.menu = v; }
/** References the menu instance that the trigger is associated with. */
@Input('mdMenuTriggerFor') menu: MdMenuPanel;
diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts
index a15c79201e35..b3afc9772b4c 100644
--- a/src/lib/tabs/tab-body.ts
+++ b/src/lib/tabs/tab-body.ts
@@ -46,7 +46,7 @@ export type MdTabBodyOriginState = 'left' | 'right';
*/
@Component({
moduleId: module.id,
- selector: 'md-tab-body',
+ selector: 'md-tab-body, mat-tab-body',
templateUrl: 'tab-body.html',
host: {
'[class.mat-tab-body]': 'true',
diff --git a/src/lib/tabs/tab-group.ts b/src/lib/tabs/tab-group.ts
index e85922ad7662..8717273b6f87 100644
--- a/src/lib/tabs/tab-group.ts
+++ b/src/lib/tabs/tab-group.ts
@@ -50,7 +50,7 @@ export type MdTabHeaderPosition = 'above' | 'below';
*/
@Component({
moduleId: module.id,
- selector: 'md-tab-group',
+ selector: 'md-tab-group, mat-tab-group',
templateUrl: 'tab-group.html',
styleUrls: ['tab-group.css'],
host: {
diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts
index 3c118ca9e20b..46724d7aacf5 100644
--- a/src/lib/tabs/tab-header.ts
+++ b/src/lib/tabs/tab-header.ts
@@ -40,7 +40,7 @@ const EXAGGERATED_OVERSCROLL = 60;
*/
@Component({
moduleId: module.id,
- selector: 'md-tab-header',
+ selector: 'md-tab-header, mat-tab-header',
templateUrl: 'tab-header.html',
styleUrls: ['tab-header.css'],
encapsulation: ViewEncapsulation.None,