Input number in Angular Material Design?

Question

There is the standard input as:

 <input type="number" placeholder="Hours">

Is there something in Angular Material Design?

I use Angular latest version

I tried this, but it is just simple input:

<md-input-container>
  <input mdInput type="number" placeholder="Favorite food" value="Sushi">
</md-input-container>

It should be < md-input-container input="number">? ot input type="number"> ?

Solution 1

In short, yes. You want < md-input-container > wrapper which supports the following input types

1. date
2. datetime-local
3. email
4. month
5. number
6. password
7. search
8. tel
9. text
10. time
11. url
12. week

For example

<md-input-container>
    <input
        mdInput
        type="number"
        id="myNumber"
    />
</md-input-container>

Checkout https://material.angular.io/components/input/overview

Solution 2

Use this for angular material number,

<mat-form-field>
  <input
    type="number"
    class="form-control"
    matInput
    name="value"
    placeholder="Slab"
    (change)="xxx()"
    formControlName="value">
</mat-form-field>

Solution 3

This one is not working anymore

<md-input-container></md-input-container>

This works fine..

<mat-label>Time</mat-label>
    <input type="number" class="form-control" matInput name="time" placeholder="Time" change)="xxx($event)" formControlName="time" required>

In .TS file, you can have the change event with xxx (e) { console.log(e); }