Angular 2 turn on compatibility mode

Question

I need to generate custom theme for Angular Material 2. But the tutorial that is provided by Angula 2 team and includes this code for scss file:

@import '../../node_modules/@angular/material/core/theming/_all-theme';
@include mat-core(); $primary: mat-palette($mat-orange, 800);
$accent: mat-palette($mat-light-blue, 600, A100, A400);
$warn: mat-palette($mat-red, 600);
$theme: mat-light-theme($primary, $accent, $warn);

@include angular-material-theme($theme);

generates CSS classes with prefix .mat- that is as I believe material v1 notation of elements?

So I decided to use mat-card and other components, but when I do so the angular 2 gives me this error

The "mat-" prefix cannot be used out of ng-material v1 compatibility mode.

any help how to A) turn on compatibility mode B) generate themes another way?

Answer 1

Update:

As of 2.0.0-beta.11, the md- prefix has been deprecated completely and the mat- prefix should be used moving forward.

---

If you're using a version lower than 2.0.0-beta.11, then this will only be an issue if your project is using AngularJS Material side-by-side with Angular Material 2.

If you aren't using AngularJS Material in your project, just go with using the md- prefix and you won't have compatibility issues (aka, CSS collisions).

---

Solution:

If your project is using AngularJS Material AND Angular 2 Material, AND you need to avoid CSS collisions:

Import NoConflictStyleCompatibilityMode into your application's root module.

import { NoConflictStyleCompatibilityMode } from '@angular/material'

@NgModule({
    ...,
    imports: [NoConflictStyleCompatibilityMode]
})
export class AppModule {}

Then use the md- prefix for Angularjs Material elements and the mat- prefix for Angular Material 2 elements.

---

Compatibility mode for @angular/material allows components (prefixed with md-) to exist side-by-side with AngularJS Material components without any CSS collisions.

When enabled, compatibility mode forces all template APIs to use the prefix mat- instead of md-. This will prevent any CSS from AngularJS Material from affecting the components in @angular/material.

Documentation for this found here.