Material Angular - doesn't work properly

Question

https://material.angular.io/guide/getting-started

ng new testapp
cd testapp
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
ng serve

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatFormFieldModule, MatInputModule } from '@angular/material';
import { AppComponent } from './app.component';

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

app.component.html

<p>Test Angular Material</p>

<form>
  <mat-form-field class="example-full-width">
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-form-field>
</form>

app.component.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Nothing work properly link in their website.

I'm pretty sure i forgot something, but i'm watching everywhere on their website and can't even know what...

Thank you for your help.

Answer 1

The import of the theme is usually in the style.css stylesheet.