Fixing Angular Material Components in Angular 17 by Adding @ include mat.core()
Learn how to resolve Angular Material component display issues after upgrading to Angular 17 by correctly including the core styles with `@ include mat.core()`.
---
This video is based on the question https://stackoverflow.com/q/79509405/ asked by the user 'Alan Dolan' ( https://stackoverflow.com/u/12800088/ ) and on the answer https://stackoverflow.com/a/79510220/ provided by the user 'Alan Dolan' ( https://stackoverflow.com/u/12800088/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.
Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Update angular 17
Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.
If anything seems off to you, please feel free to drop me a comment under this video.
---
The Problem: Angular Material Components Not Displaying in Angular 17
After upgrading an Angular application to version 17 and updating Angular Material accordingly, core components like mat-select and dialogs stopped working properly. Clicking on these components triggers no visible action, despite the elements existing in the DOM.
This issue primarily affects overlay-based components (such as dialogs and selects that open overlays), suggesting that they lose essential styles or overlays are not rendering correctly.
Root Cause: Missing Angular Material Core Styles
Your custom Material theme setup looks mostly correct, defining palettes and applying the theme mixins. However, what is missing is the inclusion of Angular Material's core styles via the mat.core() mixin.
While earlier Angular Material versions (like v16) may have bundled core styles differently or included them by default, Angular 17 requires explicitly including these core styles to ensure components render with all necessary CSS.
The Solution: Add @ include mat.core() to Your SCSS
In your material.scss file or wherever your Material theming is defined, add the following line before including component themes:
[[See Video to Reveal this Text or Code Snippet]]
Why This Matters
mat.core() includes essential foundational styles for Angular Material components.
It ensures overlay elements, ripples, typography, and other base styles render properly.
Without it, components like mat-select overlays or dialog backdrops might not appear.
Summary Checklist
Define your custom palettes and theme as usual.
Add @ include mat.core(); at the top of your Material styles.
Include component theme mixins after.
Rebuild and verify that overlays and interactive components behave correctly.
By explicitly including the core styles, Angular Material components regain their default styling and functionality, resolving the display problems encountered after upgrading to Angular 17.
If you continue having issues after this fix, ensure that no global styles are overriding overlay styles and that Angular Material packages are fully updated and compatible with Angular 17.
On this page of the site you can watch the video online Fixing Angular Material Components in Angular 17 by Adding @ include mat.core() with a duration of hours minute second in good quality, which was uploaded by the user vlogommentary 15 December 2025, share the link with friends and acquaintances, this video has already been watched 4 times on youtube and it was liked by like viewers. Enjoy your viewing!
