53l3m 53l3m - 16 days ago 9
TypeScript Question

md-input binding error in Angular2 stable version

I've got a common error while upgrading an

angular2
app to stable version but none of the mentioned solutions worked for me (which is almost a widespread only one solution).
Here is it :

Template parse errors:
Can't bind to 'placeholder' since it isn't a known property of 'md-input'.
1. If 'md-input' is an Angular component and it has 'placeholder' input, then verify that it is part of this module.
2. If 'md-input' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.


I've tried to import the
FormsModule
according to this solution1 and this solution2 (which are the same) but the same error still occuring. Is there an other solution for it ?

the HTML :

<div class="col-lg-10 col-lg-offset-1">
<div class="md-block">
<md-input
id="name"
[ngModel]="xyzStuff?.xyz_name"
placeholder="{{'xyzName' | translate}}"
formControlName="name"
dividerColor="{{getDividerColor(xyzForm.controls.name)}}"
>
</md-input>
</div>
</div>


and the
Module file
:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { UIRouterModule } from 'ui-router-ng2';
import { TranslateModule } from 'ng2-translate';

import { ParComponent } from './par.component';
import { XyzSettingsComponent } from './shared/xyz-settings/xyz-settings.component';

@NgModule({
declarations: [
ParComponent,
XyzSettingsComponent
],
imports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
ReactiveFormsModule
],
providers: [],
exports: [
FormsModule,
BrowserModule,
UIRouterModule,
TranslateModule,
ReactiveFormsModule
]
})
export class ParModule {}


Any help ?

Answer

md-input is belongs to angular2 material project. Angular 2 Material is entirely different plugin. You have to make sure you import MaterialModule imported and injected inside imports option of NgModule.

import { MaterialModule } from '@angular/material';

@NgModule({
  declarations: [
    ...
  ],
  imports:       [
    ...,
    MaterialModule.forRoot(), //<-- imported material module here
    ...
  ],
  providers:     [],
  exports:       [
    ...
  ]
})

I'd highly recommend you to go through the Getting started page Angular2 material

Note: Make sure you should import MaterialModule in whichever modules component you want to use Angular 2 material components.

Comments