I'm practicing the use of Anuglar Material Design components. I have gone through the regular steps to add Angular Material using 'ng add @angular/material' and selected one of the themes and okayed other defaults.
Everything works well, except that the form inputs are not visible in any of the browsers. They become visible only after intuitively clicking on the screen, guessing where the input maybe present. When I focus out of the input, the input field disappears
//app module ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {MatInputModule} from '@angular/material/input'
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatInputModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
//app component ts
import { Component, NgModule } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
title = 'ang-mat-design';
}<!--no code added --><mat-form-field appearance = "fill">
<input matInput placeholder = "Input">
<mat-hint>Sample Hint</mat-hint>
</mat-form-field>