If Angular Material is not working, first identify whether the failure is installation/build, component recognition or rendering, styling, or animation. Those symptoms point to different checks. For an Angular CLI project, the documented setup entry point is ng add @angular/material; then test one component in isolation before changing the rest of the app.
First, identify what “not working” means
The title alone does not identify a specific bug. Record the exact build or browser-console error, the component and selector involved, your Angular and @angular/material versions, and whether the project uses standalone components or NgModules. Then classify the symptom:
As an Amazon Associate I earn from qualifying purchases.
- Install or build failure: the package is missing, setup did not complete, or the compiler reports an error.
- Component not recognized or rendered: check that the component is imported where its template is used and that the selector is correct.
- Component appears but looks wrong: check the global theme and style configuration.
- Only transitions or animation-dependent behavior is missing: check the animation setup for the Angular version in the project.
Do not assume a version mismatch or a single root cause without the package versions and error details.
Check installation and project setup
For a project managed with Angular CLI, Angular Material’s documented setup command is ng add @angular/material. The schematic installs Angular Material and the Component Dev Kit (CDK), and asks about theme and typography setup. Review the project selection and configuration changes it proposes. See the current Angular Components getting-started guide.
#1 Best Overall
The current guide also describes adding Roboto and Material Symbols font references to index.html and basic global CSS. Treat those as details of that guide’s setup flow, not requirements that every existing app must satisfy identically.
Match the component import to its selector
A Material component must be imported in the context that uses its template. In the guide’s standalone example, MatSlideToggle is imported from @angular/material/slide-toggle and included in the component’s imports; the matching template element is <mat-slide-toggle>.
For the component that fails, verify both sides: the imported Material symbol belongs to that component, and the template uses its correct selector. In an NgModule-based project, check the module that declares the component instead. The Angular Material v18 guide and v16 guide are available when you need instructions for those versions.
If it renders without the expected styling, check the theme
When the component’s element is present but its visual treatment is absent or incorrect, check that a theme is included in the app’s global styles. The setup guide offers a prebuilt theme or a custom theme; use guidance that matches the Material version installed in the project. The v16 guides index includes material on customizing component styles.
Rank #3
A component that renders without the expected appearance is a different problem from a template that cannot recognize the component. Check the theme independently rather than treating a styling symptom as proof that installation or imports failed.
If animations are missing, follow version-matched instructions
Only investigate animation configuration when the reported problem is specifically missing transitions or animation-dependent behavior. The current setup guide includes an animation configuration choice, while historical guides use different setup patterns. For example, older v5 instructions document BrowserAnimationsModule and NoopAnimationsModule; do not copy those module-based instructions into a newer project without checking the documentation for its Angular and Material versions. The v5 getting-started guide is historical, not a universal current recipe.
Use a minimal slide-toggle test to narrow the fault
The official setup guide’s small verification example is useful because it separates basic Material setup from the original component’s complexity:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →- Import
MatSlideTogglefrom@angular/material/slide-toggleinto a standalone component’simports. - Add
<mat-slide-toggle>Toggle me!</mat-slide-toggle>to that component’s template. - Run
ng serveand inspect the page at the local development server.
If this test fails, focus on project setup, imports, or configuration. If it works, compare the original component’s import, selector, template context, and style scope. This narrows the investigation; it does not prove a particular cause.
Angular Material setup changes across versions. The current guide uses a standalone-style example, and versioned guides are available for v16 and v18. The information here does not establish a compatibility matrix or current release number, so check the documentation matching the versions actually installed.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
