article: Exploring Material 3 Design With Angular Material | Angular Material Dev

[giscus[bot]]

article: Exploring Material 3 Design With Angular Material | Angular Material Dev

Learn Material Design in Angular, Theming Angular Material Components and Developing your Angular application with Material Design like a pro.

https://angular-material.dev/articles/angular-material-3

[raboud]

No drag and drop schematic

ng generate @angular/material:drag-drop drag-drop
Error: Unknown argument: drag-drop

maybe

ng generate @angular/cdk:drag-drop drag-drop

[shhdharmen]

I am not getting this warning message in console.

[jillisstada]

Hi, got the same error started with $theme being undefined in terminal ✘ [ERROR] Undefined variable.

33 │ @include layout-component.theme($theme);
│ ^^^^^^
src/styles.scss 33:35 root stylesheet [plugin angular-sass]

in console
main.ts:5 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming
_checkThemeIsPresent @ core.mjs:200
_MatCommonModule @ core.mjs:118
MatCommonModule_Factory @ core.mjs:138
factory @ core.mjs:3336
(anonymous) @ core.mjs:3233
runInInjectorProfilerContext @ core.mjs:871
hydrate @ core.mjs:3232
get @ core.mjs:3095
injectInjectorOnly @ core.mjs:1106
ɵɵinject @ core.mjs:1112
useValue @ core.mjs:2863
resolveInjectorInitializers @ core.mjs:3149
EnvironmentNgModuleRefAdapter @ core.mjs:18975
createEnvironmentInjector @ core.mjs:18996
getOrCreateStandaloneInjector @ core.mjs:28763
definition.getStandaloneInjector @ core.mjs:28801
create @ core.mjs:16654
bootstrap @ core.mjs:32434
(anonymous) @ core.mjs:36497
invoke @ zone.js:365
onInvoke @ core.mjs:15743
invoke @ zone.js:364
run @ zone.js:111
(anonymous) @ zone.js:2447
invokeTask @ zone.js:398
(anonymous) @ core.mjs:15428
onInvokeTask @ core.mjs:15428
invokeTask @ zone.js:397
onInvokeTask @ core.mjs:15730
invokeTask @ zone.js:397
runTask @ zone.js:158
drainMicroTaskQueue @ zone.js:577
Zone - Promise.then (async)
onScheduleTask @ core.mjs:15422
scheduleTask @ zone.js:378
onScheduleTask @ zone.js:267
scheduleTask @ zone.js:378
scheduleTask @ zone.js:201
scheduleMicroTask @ zone.js:221
scheduleResolveOrReject @ zone.js:2437
then @ zone.js:2642
(anonymous) @ core.mjs:36492
_callAndReportToErrorHandler @ core.mjs:32206
(anonymous) @ core.mjs:36489
invoke @ zone.js:365
onInvoke @ core.mjs:15743
invoke @ zone.js:364
run @ zone.js:111
run @ core.mjs:15604
internalCreateApplication @ core.mjs:36460
bootstrapApplication @ platform-browser.mjs:1124
(anonymous) @ main.ts:5
Show 50 more frames
Show less
app.routes.ts:36 Could not find Angular Material core theme. Most Material components may not work as expected. For more info refer to the theming guide: https://material.angular.io/guide/theming

[shhdharmen]

did you clone the repo and run?

[Reellron]

The code in this article is missing the declaration of $theme. Just add the line below to styles.scss and the error for $theme not being defined will be gone. Please not that you need to add it after you've added the m3-theme, otherwise the variable would have to be declared in another way.
$theme: m3-theme.$light-theme;

[shhdharmen]

Codes in the article are reduced for brevity. And hence, a full functional public repository is created for the audience.

[StjopAvetisyan]

stackblitz not working

[shhdharmen]

I will check and update.

[shhdharmen]

fixed

[Reellron]

In the article, you're instructing to not create a dark theme, "Simply enter #6750A4 for the above question and leave blank for the rest of the questions.", but then you show dark-theme when looking at example code,

As mentioned in a reply, the styles.scss file in this article is missing a line of code for the application to work:
$theme: m3-theme.$light-theme;

[shhdharmen]

I agree about instructions not being clear in the article, I have fixed them. Codes in the article are reduced for brevity. And hence, a full functional public repository is created for the audience.

[askurat]

This is a great article. I would love to see one on how to implement the side-nav rail, similar to this site.

[shhdharmen]

Yes, soon I am going to reveal a new platform for all such components and much more! Stay tuned!

[shhdharmen]

@askurat If you are still looking for navrail, I have released it under my new project at https://ui.angular-material.dev/blocks/application/application-shells/multi-column#full-width-with-narrow-sidebar

[cristianosky]

Hello, excellent article, it has helped me a lot. I have a question: is it possible to add a button that changes the color of the size?

[shhdharmen]

I didn't exactly understand your question. What do you mean by changing color of the size?

[cristianosky]

Sorry, no size, but the color of the theme, whether light or dark.

[melroy89]

Actually you forgot to mention that you will need to add @use '@angular/material' as mat; as well at the top of the styles.scss file

[melroy89]

And you should NOT use @import, but use @use instead

[shhdharmen]

Which file you're referring to? In article, it's already using @use. https://angular-material.dev/articles/angular-material-3#new-m3-themes

[melroy89]

@shhdharmen here you go: https://material.angular.io/cdk/overlay/overview .. Maybe promote @use to be displayed first? Or fully remove @import line.

[shhdharmen]

For that, you need to create issue at https://github.com/angular/components/issues

[melroy89]

Yup sorry about that. Done: angular/components#30895