Skip to content

Commit

Permalink
docs(guides): add guide for using compatibility mode
Browse files Browse the repository at this point in the history
Fixes #4018
  • Loading branch information
epelc committed Apr 13, 2017
1 parent b5f15ad commit bc10255
Showing 1 changed file with 32 additions and 0 deletions.
32 changes: 32 additions & 0 deletions guides/compatibility-mode.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
# Compatibility Mode
Compatibility mode allows `@angular/material` to work with [Angular Material for AngularJS](https://material.angularjs.org/latest/).

## Upgrade Process Overview
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`.
1. Setup `@angular/upgrade/static` and bootstrap Angular in your AngularJS project
2. Setup and enable compatibility mode for `@angular/material`
3. Convert all components over to Angular and `@angular/material`
4. Remove Angular Material for AngularJS
5. Disable compatibility mode
- Find/replace `mat-` with `md-`
- Remove `NoConflictStyleCompatibilityMode`


## Upgrade Checklist
- [ ] Switch all `@angular/material` component prefixes in templates from `md-` to `mat-`
- 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.
- Do not forget to update attributes such as `mdTooltip` -> `matTooltip`
> NOTE you are only renaming `@angular/material` components(for Angular 2+) in your project.
- [ ] Import `NoConflictStyleCompatibilityMode` to shows errors when you use `md-` instead of `mat-`(compatibility) for your prefix.



## FAQ
View the [compatibility tests](https://github.com/angular/material2/blob/master/src/lib/core/compatibility/compatibility.ts) for some info/examples.

- What is Compatibility Mode?
- 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)
- What is `mat-`?
- This is the prefix used for `@angular/material` when it is running in compatibility mode.
- How do I find out which element is using `md-` instead of `mat-`?
- 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 comments on commit bc10255

Please sign in to comment.