Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular Material

03.02.2021 (👁5305)

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