Issue with latest Angular2 material

[josephserrano15]

Bug, feature request, or proposal:

Md2 is not compatible with the angular material

What is the expected behavior?

What is the current behavior?

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: http://plnkr.co/edit/rQmUz8WYRh5Vz4gwY8E4?p=info

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, MD2, OS, browsers are affected?

Is there anything else we should know?

[xuko]

I think that is for the "md" prefixes deprecation and the compatibility mode
https://github.com/angular/material2/blob/master/CHANGELOG.md#deprecation-of-md-prefix

[mtinnes]

After upgrading to material 2.0.0-beta.12 I'm getting the following exception originating from md2/core/compatibility/compatibility.js:

The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-toolbar" element.

[josephserrano15]

Seems that not all module are affected. I end-up importing the one I needed instead of Md2, and it works fine again. Not sure which features is breaking it.

[AndreasStahlHicknHack]

I'm having a similar Issue, but with MD2 Datepicker. Even when I only import the Md2DatepickerModule it still throws an Error "MD_DATE_FORMATS". Using Material 2.0.0-beta.12 and Angular 4.4.4.

Edit, 4 days later: I found the solution to this specific problem was to import the MdNativeDateModule:

import { Md2DatepickerModule, MdNativeDateModule } from 'md2';

...

@NgModule({
    imports: [
        Md2DatepickerModule,
        MdNativeDateModule,
        ...

[christoph-feb22]

Same probleme here. I'm using Material beta.12 and Angular 4.4.4 and I get the error

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

I completely removed the Md2 package to solve the issue.

[MienDev]

me too. Using Material 2.0.0-beta.12 and Angular 4.4.4.

It's seems that MATERIAL_COMPATIBILITY_MODE leads this. code as following.

md2/src/lib/core/compatibility/compatibility.ts

Line 3 in a3ca00d

export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken<boolean>('md-compatibility-mode');

md2/src/lib/core/compatibility/compatibility.ts

Line 147 in a3ca00d

throw getMdCompatibilityInvalidPrefixError('mat', elementRef.nativeElement.nodeName);

howerver, It is by design (seems to be).

---

For those who need help.

1. After Material 2.0.0-beta.12 , md- prefix is totally replaced with mat-, you have to use all directive
   with mat-prefix selector. replace all md selector to mat selector. inluding mdLine, md-rise-button and so on.

but md2 told you that The "mat-" prefix cannot be used in ng-material v1 compatibility mode.

2. So if you wanna to keep using md2, import NoConflictStyleCompatibilityMode

@NgModule({
  imports: [
    // ... 
    Md2Module,
    NoConflictStyleCompatibilityMode  // from 'md2'
  ]
}

or

@NgModule({
  providers: [{
    provide: MATERIAL_COMPATIBILITY_MODE, useValue: true,
  }],
})

[minolta]

@MienDev It work thank you

[christoph-feb22]

The best way would be to remove the complete compatibility part, as they have done it in material.

[michaelreiser]

Is anyone having issues with the latest Angular Material with this enabled? I can't get floating placeholders to work, and I suspect it may be that compatibility mode might be the culprit

[MienDev]

@michaelreiser I don't think MATERIAL_COMPATIBILITY_MODE could lead your problem.

You can provide more information, such as code segment including matInput, for investigation.

I can't get floating placeholders to work

As a reminder, you can check the list following,

1. Import MatFormFieldModule, MatInputModule (both) to your module.
2. Use matInput directive, NOT mdInput
3. Use mat-form-field as container, NOT md-input-container , NOR mat-input-container

May this help.

[michaelreiser]

@MienDev
Both modules are imported. Here are two code examples:

      <mat-form-field>
        <input matInput placeholder="INC" formControlName="reference_id" />
      </mat-form-field>

And

    <mat-form-field class="full-width">
      <textarea matInput mat-autosize placeholder="Workaround (Optional)" formControlName="workaround" #workaround></textarea>
    </mat-form-field>

I tried using both the placeholder property and the <mat-placeholder> element approaches. I'll dig deeper into the code. Maybe I missed something else. I just wanted to be sure that compatibility mode wasn't the culprit, since everything else seems to be accounted for.

UPDATE - I had a custom CSS file that was causing the issue. I no longer have the problem.