CODEWITHSUNDEEP
angularangular-material
kmansoor
kmansoor

Reputation: 4345

Angular Material 2: 'md-input' is not a known element

What am I missing here? Should md-input be individually loaded in the module file?

This works:

<md-input-container>
  <input mdInput name="username" placeholder="Username" [(ngModel)]="username" #name="ngModel" required>          
</md-input-container>

However, this fails:

<md-input placeholder="amount" align="end">
  <span md-prefix>$&nbsp;</span>
  <span md-suffix>.00</span>
</md-input>

with the following error:

Unhandled Promise rejection: Template parse errors:
'md-input' is not a known element:
1. If 'md-input' is an Angular component, 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. ("
  </div>
  <div>
    [ERROR ->]<md-input placeholder="amount" align="end">
      <span md-prefix>$&nbsp;</span>

app.module.ts

import { NgModule }      from '@angular/core';
import { CommonModule }   from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from "@angular/forms";
import { MaterialModule } from "@angular/material";

import { AppComponent }  from './app.component';

import "hammerjs";

@NgModule({
  imports:      [ 
    CommonModule,
    BrowserModule, 
    FormsModule,
    MaterialModule.forRoot() 
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Upvotes: 2

Views: 13222

Answers (2)

Tyler Jennings
Tyler Jennings

Reputation: 8911

I think your specifying your prefix and suffix incorrectly. According to https://material.angular.io/components/component/input

Prefix and Suffix

HTML can be included before, and after the input tag, as prefix or suffix. It will be underlined as per the Material specification, and clicking it will focus the input.

Adding the mdPrefix attribute to an element inside the md-input-container will designate it as the prefix. Similarly, adding mdSuffix will designate it as the suffix.

Instead of using md-prefix and md-suffix:

<md-input placeholder="amount" align="end">
  <span md-prefix>$&nbsp;</span>
  <span md-suffix>.00</span>
</md-input>

Try using mdPrefix and mdSuffix and wrapping it in an md-input-container:

<md-input-container>
    <input mdInput placeholder="amount" align="end">
    <span mdPrefix>$&nbsp;</span>
    <span mdSuffix>.00</span>
</md-input-container>

Upvotes: 0

Michele Sapignoli
Michele Sapignoli

Reputation: 597

That's because in your second example the syntax is wrong. With the last 2.0.0 beta .1 (that I suppose you're using) the md-input keyword was replaced with mdInput. So if you desire an input styled with Angular Material 2 just type 

<md-input-container>
    <input mdInput placeholder="Username" name="username">
 </md-input-container>

Upvotes: 3

Related Questions