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
That link is now in working order. The problem was I didn't include styles import.
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
styles.css
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/guidesBrowserAnimationsModule
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.