|
| 1 | +# Compatibility Mode |
| 2 | +Compatibility mode allows `@angular/material` to work with [Angular Material for AngularJS](https://material.angularjs.org/latest/). |
| 3 | + |
| 4 | +## Upgrade Process Overview |
| 5 | +Below is a general overview of the upgrade process for an AngularJS application which uses [Angular Material for AngularJS](https://material.angularjs.org/latest/) and wishes to upgrade to Angular 2+ with `@angular/material`. |
| 6 | +1. Setup `@angular/upgrade/static` and bootstrap Angular in your AngularJS project |
| 7 | +2. Setup and enable compatibility mode for `@angular/material` |
| 8 | +3. Convert all components over to Angular and `@angular/material` |
| 9 | +4. Remove Angular Material for AngularJS |
| 10 | +5. Disable compatibility mode |
| 11 | + - Find/replace `mat-` with `md-` |
| 12 | + - Remove `NoConflictStyleCompatibilityMode` |
| 13 | + |
| 14 | + |
| 15 | +## Upgrade Checklist |
| 16 | +- [ ] Switch all `@angular/material` component prefixes in templates from `md-` to `mat-` |
| 17 | + - See [this](https://github.com/angular/material2/blob/master/src/lib/core/compatibility/compatibility.ts#L33-L150) for a list of all components you need to rename. |
| 18 | + - Do not forget to update attributes such as `mdTooltip` -> `matTooltip` |
| 19 | + > NOTE you are only renaming `@angular/material` components(for Angular 2+) in your project. |
| 20 | +- [ ] Import `NoConflictStyleCompatibilityMode` to shows errors when you use `md-` instead of `mat-`(compatibility) for your prefix. |
| 21 | + |
| 22 | + |
| 23 | + |
| 24 | +## FAQ |
| 25 | +View the [compatibility tests](https://github.com/angular/material2/blob/master/src/lib/core/compatibility/compatibility.ts) for some info/examples. |
| 26 | + |
| 27 | +- What is Compatibility Mode? |
| 28 | + - Compatibility Mode allows you to use `@angular/material` and [Angular Material for AngularJS](https://material.angularjs.org/latest/) in the same project without running into issues(css selector overlap, js issues, etc) |
| 29 | +- What is `mat-`? |
| 30 | + - This is the prefix used for `@angular/material` when it is running in compatibility mode. |
| 31 | +- How do I find out which element is using `md-` instead of `mat-`? |
| 32 | + - If you are using 2.0.0-beta-3 or earlier, the error message isn't very helpful. Either wait for a new release or install the latest master to get this [fix](https://github.com/angular/material2/commit/2d500445d4f53055623250dc18569241f7b4fceb). |
0 commit comments