#

Beispiel Code Angular Material Eingabefelder Input matInput

 

Angular Material Input Type String and Time

 

                      

 

Component.ts

import { ComponentOnInit } from '@angular/core';

 

@Component({

  selector: 'app-input01',

  templateUrl: './input01.component.html',

  styleUrls: ['./input01.component.css']

})

export class Input01Component implements OnInit {

 

  value_string : String="abc";

  public value_string_time : String ="08:00";

 

  constructor() { }

 

  ngOnInit(): void {

  }

 

}

 

 

 

Component.html

<style>

    div {

        margin22px;

        padding10px;

        background-color#eeeeee;

        width600px;

    }

    p{colorblue  ;}

</style>

 

<!-- <form > -->

<div >

    <p>value_string:={{value_string}}</p>

    

    <label>component.ts: value_string : String="abc";</label><br>

    <label>component.html: input matInput type="text" [(ngModel)]="value_string":</label>

    <br><br>

    <mat-form-field style="width:400px">

        <mat-label>input string:</mat-label>

        <input matInput type="text" [(ngModel)]="value_string">

    </mat-form-field>

</div>

 

<div>

    <p>value_string_time:={{value_string_time}}</p>

    <label>input type="time" matInput [(ngModel)]="value_string_time"</label>

    value_string_time:={{value_string_time}}

    <br>

    <mat-form-field>

        <mat-label>input time:</mat-label>

        <input type="time" matInput [(ngModel)]="value_string_time">

    </mat-form-field>

</div>

<!-- </form> -->

 

 

App.module.ts

Important: FormsModule and MatInputModule

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

 

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

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { Input01Component } from './components/input01/input01.component';

 

import {MatInputModulefrom '@angular/material/input';

import {FormsModulefrom '@angular/forms';

 

@NgModule({

  declarations: [

    AppComponent,

    Input01Component

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    MatInputModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

 

 

 

Note: Add Angular Material in Visual Code Terminal

ng add @angular/material

 

 

Mobile

.

0123movie.net