Angular Material "md" vs "mat" Prefix

Asked on August 12, 2018
What is difference between Angular Material md and mat prefix? 

Replied on August 12, 2018
1. md prefix is used in AngularJS Material and mat prefix is used in Angular Material.
Sample Button in AngularJS Material:

<md-button class="md-primary">Click me</md-button>

Sample Button in Angular Material:

<button mat-button>Click me!</button>

2. Initially Angular Material supported both prefix md and mat but in Angular material 2.0.0-beta.11, Angular has deprecated md prefix.

3. In Angular Material 2.0.0-beta.12, All md prefixes have been removed.

4. We can find the reason to remove md prefix from Angular Material CHANGELOG.

Reason to Remove md prefix (Taken from Angular Material CHANGELOG): 

  • Many users found the fact that the CSS used "mat" while templates used "md" confusing.
  • Users in compatibility mode found that having "mat" in their templates while TypeScript class names remained "Md" to be unfriendly.
  • Making both prefixes available consistently through templates required adding many getters/setters that aliased the "true" property. This ends up increasing payload size and complexity of the source code.
  • Compatiblity mode itself used broad directive selectors to enforce that only one prefix was used at a time. This causes a problem where this broad selector prevents Angular from throwing an error if an application uses a component without importing its NgModule


Write Answer

©2024 | Privacy Policy | Contact Us