Material 3 for Angular 17

[dreamstar-enterprises]

Hi I'm a bit confused, but where is the official Material 3 components website, for the web for use in Angular 17.

Is there a ShadCN equivalent coming to Angular (like: https://ui.shadcn.com/docs/components/navigation-menu), with good documentation like this: https://material.angular.io/components/categories.

All I see is https://material.angular.io/guide/material-3 which is mostly about theming.

There is nothing here (https://material-web.dev/components/checkbox/) that explains how to use the Material 3 checkbox (md-checkbox in Angular), rather than the older (mat-checkbox). When I do this,
import {MdCheckbox} from '@material/web/checkbox/checkbox.js', Angular doesn' allow me to import the component, saying, Class MdCheckbox cannot be imported (neither an Angular module nor a standalone declarable)

Any pointers would be appreciated.

[kelliev]

Angular projects use Angular Material. Google recommends this direction. Sadly, it is buried in announcements and other communications, but use that. Material Web is focused on other frameworks like React and Vue. Hope that helps.

[kelliev]

Angular app = Angular Material. That's all you need to know re: using Angular and M3. Read the guides, they explain everything.

[dreamstar-enterprises]

Thanks. I think the documentation could have some greater clarity. I only asked the question, after reading the guides..

[aksdog]

I'm happy I could help!

For clarification, Angular Material is based off of Material Design 3 design specs for components.
material-web is the component library created by the Material Design team themself, meant for usage across the web (plain html, react, etc.). M3, short for Material Design 3, are simply design specs and guidance that material-web follows.
Angular Material creates special tokens for usage by Angular using Material Design 3 design specs.

[dreamstar-enterprises]

Thank you for clarifying.
I think my confusion was in thinking material-web, for plain web apps, included Angular.
It looks like Angular material is separate, and not considered part of plain web / material-web. (maybe I'm wrong)
... even though I'm using Angular right now to try and create a web app.

[kelliev]

Correct. Mostly. Material Web claims to be for all, but Google and the teams that work on these libraries, specifically call out Angular Material for Material Design's components using Angular. Ha! Clear as mud.

[dreamstar-enterprises]

Just to double check,

If I wanted to use Angular Material I use:

"@angular/material": "^17.3.1",
"@angular/material-experimental": "^17.3.5",
"@angular/material-moment-adapter": "^17.3.5",

But If I wanted to use Material 3, I use:

"@material/web": "^1.4.1",
"material-components-web": "^14.0.0",

What's the difference between:

"@material/web": "^1.4.1",
"material-components-web": "^14.0.0",

I'm guessing, for Angular, this is better:

"@angular/material": "^17.3.1",
"@angular/material-experimental": "^17.3.5",
"@angular/material-moment-adapter": "^17.3.5",

particularly
"@angular/material-experimental": "^17.3.5",

[kelliev]

If you are using Angular, use Angular Material period.
If you want to "play" with m3, use the experimental repo.
Material Web is for things that are not angular.
The biggest take away is that M3 is still not finished for ANY platform -- so you will not get a complete m3 site no matter what.