Beispiel Code Angular Material Eingabefelder Input matInput
Angular Material Input Type String and Time
Component.ts
import { Component, OnInit } 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 { margin: 22px; padding: 10px; background-color: #eeeeee; width: 600px; } p{color: blue ;} </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 {MatInputModule} from '@angular/material/input'; import {FormsModule} from '@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
|