Angular
How to install the Angular Design System ?
It’s a new angular project, and i want to start with a preconfigured project (a starter)
1. Get the starter application
git clone https://gitlab.michelin.com/design-system/starter.git
2. Intall all dependencies
npm i
3. Remove .git folder and push to your git repositiory
4. The official Michelin theme is already installed
5. You have to install Angular Design system modules. See below.
It’s an existing angular project, or I want to start from scratch
1. Install Angular Material (it’s mandatory, you have to remove Bootstrap later if you use it)
ng add @angular/material
2. Install the Design system dependencies
npm i @angular/flex-layout@angular/cdk@michelin/theme
npm i @angular/cdk overlayscrollbars@^1.13.3npm i @types/overlayscrollbars@^1.12.1 --save-dev
3. You have to set Angular Design System modules and the official Michelin theme.See below.
How to install modules of the Angular Design System ?
We build a module for each Design System component. Update your main module by adding modules that you want to use :
@NgModule([
imports : [
---
SidebarModule, //To use the sidebar component
AlertModule, //To use the alert component
---
],
])
How to install the official Michelin theme ?
We build a Sass mixin to easily share the official Michelin theme. The theme contains all Michelin official colors as SAAS variables and can be used anywhere in your app.
1. Move your global src/style.scss file to src/scss/style.scss
2. Add a src/scss/_theme.scss file to include the design-systel-theme mixin :
@import ‘@michelin/theme/
$theme:mat-light-theme(
mat-palette($mic-blue, A400,A100,A700
mat-palette($mic-purple, A400,A100,A700
mat-palette($mic-red, A400,A100,A700
);
@include design-system-theme($theme,true)
Compatibilities between Design System and Angular versions
Design System / Angular versions
Design System version | Angular version | Node.js version | TypeScript version | RXJS version |
|---|---|---|---|---|
5.X.X | ^16.0.0 | ^16.14.0 | ^4.9.3 | ^7.5.5 |
4.X.X | ^15.0.0 | ^14.20.0 | ^4.8.4 | ^7.5.5 |
3.X.X | ^14.0.0 | ^14.15.0 | >= 4.6.4 < 4.9.0 | ^7.5.5 |
2.4.0 < 3.X.X | ^13.0.0 | ^12.20.2 | >= 4.4.4 <= 4.5.5 | ^7.4.0 |
2.0.0 < 2.4.0 | ^12.0.0 | ^12.14.1 | >= 4.2.4 <= 4.3.5 | 6.6.3 |
1.0.0 < 2.0.0 | ^11.0.0 | ^10.13.0 | >= 4.0.8 <= 4.1.6 | 6.6.3 |
For additional informations :
@angular/flex-layout is removed from peer dependencies, since Angular 15. This lib can't be used after this version (see css helper classes)
Angular versions v2 to v13 are no longer supported.
Component development state
You can check our state of development on our Components status page
Troubleshooting & Contribution
Here you'll find a way to submit your questions, report a bug, request a feature or share any suggestions. Your feedback will help us improve💪
We are using GitLab Issues for bug tracking. The best way to get your bug fixed is by creating a clear and concise issue directly through the link below.
Our platform is opened to contribution. Feel free to create an issue if you have any suggestions or to request a feature.If you encounter any issues while setting up Angular Design System, you can ask on our dedicated Teams channel.