Why Angular is the best framework for a design system

Design systems are critical for any company that wants to enable rapid development and innovation while maintaining a consistent user experience, and design. Angular is the best framework for developing a design system due to the wide range of features provided by the framework, including the ability to compile to custom elements. This is in addition to the power of Angular schematics that has allowed us to automatically install and setup the library in every project, as well as generate key components that are specific to our design system, and organization with just one command.
Here is my original talk at ngVikings 2020:
• Why Angular is the bes...

[@jonathan.ijzerman]

Good points 👍🏻

[@joshblf]

Amazing talk! There are so many great tips here that I might have to watch this more than once to catch them all.

[@mechantgarcon6262]

Fantastic video! Very good explanation!!

[@Jessyco]

Hi there, I'm looking at trying to get the angular library compiled at a different version then the project implementing it. Since it's compatible with different frameworks this should be possible right? Could you show us how to go about compiling an angular project as web-components? simply running ng build command seems to simply compile it normally for modular system which includes a peerDependency checker forcing us to match angular versions.

[@biovawan]

Thank you for the presentation!
How can I use angular material within zone-less apps? If it doesn't work, are there any angular material-like design systems that works within zone-less apps?
Thank you in advance!

[@curiousprogramming]

Thanks! I have not tried to use angular material without zone.js, but you could try to use material components web components to bypass the framework problem entirely. Still a work in process, but might help: github.com/material-components/material-components-web-components

[@jvzaniolo]

Hey man, I work in a company that's starting to build a design system with angular and we don't know how to distribute the code to other projects. We are trying to add scss on top of Angular Material but we are also having a hard time defining what should be "free" and what should be created in sass

[@jvzaniolo]

And how did you created your own "ng install" library to configure the project?

[@curiousprogramming]

We did not find a good tutorial online so we just reverse engineered the one for angular material. Here is our implementation: github.com/JGH153/hal-components/tree/trunk/projects/hal-components/schematics/ng-add

[@curiousprogramming]

You could pull in angular material into a angular library (+ your own styling) that you publish on NPM. I have written a bit about it here medium.com/grensesnittet/a-practical-guide-to-creating-design-systems-with-7-tips-ff870c73ccff