Angular Material Input – A form component

material.module.ts

import { NgModule } from '@angular/core';
import { MatButtonModule, MatDividerModule, MatGridListModule, MatFormFieldModule, MatInputModule } from '@angular/material';
import { MatProgressSpinnerModule} from '@angular/material/progress-spinner';
import { MatBadgeModule } from '@angular/material/badge';
import { MatButtonToggleModule} from '@angular/material/button-toggle';
import { MatIconModule} from '@angular/material/icon';
import { MatToolbarModule} from '@angular/material/toolbar';
import { MatSidenavModule} from '@angular/material/sidenav';
import { MatMenuModule} from '@angular/material/menu';
import { MatListModule } from '@angular/material/list';


const MaterialComponent = [
  MatButtonModule,
  MatButtonToggleModule,
  MatIconModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatToolbarModule,
  MatSidenavModule,
  MatMenuModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatFormFieldModule,
  MatInputModule
];

@NgModule({
  imports: [
    MaterialComponent,
  ],
  exports: [
    MaterialComponent
  ]
})
export class MaterialModule { }

app.module.ts

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

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
import { FormsModule } from '@angular/forms';


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

app.component.html

<div>
  <mat-form-field>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field> <!-- flatLabel="auto" which is default -->
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="never">
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always">
    <mat-label>Name</mat-label>
    <input matInput>
  </mat-form-field>
</div>
<div>
  <mat-form-field>
    <mat-label>On Focus Hint</mat-label>
    <input matInput (focus)="focusState = true" (focusout)="focusState = false">
    <mat-hint  *ngIf="focusState">Hello hint</mat-hint>
  </mat-form-field>
</div>
<!-- For multiple fields
  <div *ngFor="let item of array">
  <input #item name="date" type="text" (focus)="item.alt = true" (focusout)="item.alt = false">
  <mat-hint align="end" *ngIf="item.alt">Max 50 characters</mat-hint>
</div> -->
<div>
  <mat-form-field floatLabel="always">
    <mat-label>Name</mat-label>
    <input matInput required>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker>
    <mat-label>Name</mat-label>
    <input matInput required>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker color="accent">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint>Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker color="warn"> <!-- apperance is legacy here -->
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker apperance="standard">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker apperance="fill">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>
<div>
  <mat-form-field floatLabel="always" hideRequiredMarker apperance="outline">
    <mat-label>Name</mat-label>
    <input matInput required>
    <mat-hint align="end">Min 5 characters</mat-hint>
  </mat-form-field>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  focusState: boolean;
}

Output :