Angular 2 enable compatibility mode

Question

I need to create a custom theme for Angular Material 2. But the tutorial provided by the Angula 2 team includes this code for the 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 the prefix .mat - , which, in my opinion, is an elemental representation of v1 elements.

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

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

any help, like A) enable compatibility mode B) generate themes in another way?

Answer 1

Update:

Starting with version 2.0.0-beta.11, the prefix md- completely and the prefix mat- should be moved forward.

---

If you are using a version lower than 2.0.0-beta.11, then it will only be if your project uses the AngularJS component next to Angular Material 2.

If you are not using the AngularJS file in your project, just use the md- prefix and you will not have compatibility issues (like CSS collisions).

---

Decision:

If your project uses AngularJS Material And Angular 2 Material, and you need to avoid CSS collisions:

Import NoConflictStyleCompatibilityMode into the root module of the application.

 import { NoConflictStyleCompatibilityMode } from '@angular/material' @NgModule({ ..., imports: [NoConflictStyleCompatibilityMode] }) export class AppModule {} 

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

---

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

When this mode is turned on, the compatibility mode forces all template APIs to use the mat- prefix instead of md- . This will prevent CSS corruption from AngularJS material for components in @angular/material .

Documentation for found here .