Material Angular - doesn't work properly

Issue

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.

Solution

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

Answered By - Alex Seitz