Using Microsoft’s FAST Design system in Angular
If you are frontend developer then you must have used few popular design system libraries like Bootstrap, Google Material Design etc. While building an Angular application, the most common design system choice is Angular Material library.
There is another design system which you might not have heard or used so far, called FAST design by Microsoft. The design itself looks very rich and highly customizable. The documentation shows how to integrate FAST design system with other technologies like Angular.
Since, I was curious to try this out this design in Angular, I built a simple To-Do list application with FAST and Angular.
You can check out the demo.
Building To-Do list app
The Angular + FAST integration documentation was pretty self-explanatory to getting started.
Since FAST library exports components as web components, we can’t just import modules into Angular NgModules as we do with Angular Material design components (e.g. MatButtonModule). Whereas, we need to import the respective module and register with FAST Dependency Injection system.
Another important thing you have to do is provide
schemas property to NgModule decorator’s metadata for custom components.
The official documentation asks you to import all FAST modules in
main.ts. You can also import required FAST components into specific modules. Note that, if you do so, you need to update
schemas the property of that NgModule. This way, you can control what is being imported into your project.
ReactiveFormsModule binding, make sure to add
ngDefaultControl attribute to FAST control for [(ngModel)] or “formControlName” binding.
I personally didn’t find FAST design in rich with controls, and CDKs compared to Angular Material design library for building Angular applications. Looks like the components demo page is not maintained or tested properly, as many components doesn’t work or won’t show the desired styling. The FAST library is highly customizable, though. The Dependency Injection system they provide also opens up a highly configurable system. If you want to use it with Angular, it will need some efforts. But, if you like this design system for your project, and ready to dive deep into design customization, then it’s a worth to give it a try.
You can find the source code for To-Do application here.