Fluid Design System 3.1 introduce a new feature that allows to dynamically add components to the DOM.
So make sure to use version 3.1 to get the most out of Fluid Design System.
1) To consume Fluid Design System with Angular, the best way is via npm (or yarn if you prefer).
Popper.js is required to use the Tooltip component. Be sure to install if you want to use all the library or only Tooltip component.
‘web-animations-js’required to use the Alert, Fab, Tag components..
2) Now add the required @webcomponents/webcomponentsjs polyfill:
If your application must be compatible with the Edge web browser (under 44.19041 or EdgeHTML 18.19041), you also have to install the @webcomponents/custom-elements polyfill:
3) Include the polyfill(s) in your application:
4) Finally, make sure that Angular includes the CUSTOM_ELEMENTS_SCHEMA schema:
Fonts and icons
The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the
ENGIE has selected the Google material font as default icons pack, read more on the
Be sure to include these fonts into the main CSS file src/style.scss (or css, less, etc… according to your project configurations).
In order to add stylesheets of the library in your project you have to include it in your angular.json file (which is at angular’s root directory).
Import the entire library
… or an single component
If you choose to import the entire library or at least the icon component, SCSS version need to be configured path of font icon $icon-font-path. So, the SCSS logic should be in a dedicated .scss file.