Angular Material does not seem to work in StackBlitz

Question

While trying to replicate another issue I am having, I tried to use StackBlitz to replicate.

However Angular Material does not seem to work on StackBlitz.... any advice or ideas on what I might be doing wrong?

https://stackblitz.com/edit/angular-e4qp5q

Update

That link is now in working order. The problem was I didn't include styles import.

Answer 1

styles.css

needs a theme, e.g.

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';

See - https://material.angular.io/guide/theming

Update

In case any one else lands here with different issues I'll add common issues getting Stackblitz to work with Angular Materials:

Note that the each component has an up-to-date stackblitz - the link for each is on the Examples tab on the far right for each component e.g https://material.angular.io/components/slider/examples

Checklist

1. Check Theme is on styles.css
2. Check if hammer.js is required (see any note in italics on API tab), if so add import 'hammerjs'; to polyfills.ts. Note in your application you will do so in your app's entry point (e.g. src/main.ts). See the Getting Started guide on the website https://material.angular.io/guides
3. Make sure to import BrowserAnimationsModule
4. Make sure to import relevant modules for the particular component from material eg import {MatAutocompleteModule} from '@angular/material/autocomplete';. The examples on the website import everthing en masse. My strategy when I only want to import exactly what is required has been to import the module shown on the API tab and then google the error message e.g. mat-form-field must contain a MatFormFieldControl and find stackoverflow answer to know MatInputModule is missing.

Answer 2

You need to import a theme in your application. Add this line to styles.css:

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

https://material.angular.io/guide/getting-started#step-4-include-a-theme

Andrew Allen was faster :)