Skip to content

Commit bc10255

Browse files
committed
docs(guides): add guide for using compatibility mode
Fixes #4018
1 parent b5f15ad commit bc10255

File tree

1 file changed

+32
-0
lines changed

1 file changed

+32
-0
lines changed

guides/compatibility-mode.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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

Comments
 (0)