Angular integration
Start with the installation of Fluid Design System in the Angular framework
Installation
So make sure to use version 3.1 to get the most out of Fluid Design System.
To consume Fluid Design System with Angular, the best way is via npm
(or yarn
if you prefer).
npm install @engie-group/fluid-design-system
Fonts and icons
The Fluid Design System uses the Lato font as global font family, read more about the typography bias on the dedicated section.
ENGIE has selected the Google material font as default icons pack, read more on the icons documentation.
Be sure to include these fonts into the main CSS file src/style.scss
(or css
, less
, etc… according to your project configurations).
/* You can add global styles to this file, and also import other style files */
@import url('https://fonts.googleapis.com/css?family=Material+Icons|Lato:300,400,700,900&display=swap');
Stylesheets
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).
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss",
"node_modules/@engie-group/fluid-design-system/lib/fluid-design-system.css"
],
CSS version
Import the entire library
"node_modules/@engie-group/fluid-design-system/lib/fluid-design-system.css"
… or an single component
"node_modules/@engie-group/fluid-design-system/lib/components/form/index.css"
SCSS version
Import the full library
"node_modules/@engie-group/fluid-design-system/src/fluid-design-system.scss"
… or an single component
"node_modules/@engie-group/fluid-design-system/src/reboot.scss"
"node_modules/@engie-group/fluid-design-system/src/components/form/_index.scss"
JavaScript
NEW
Automatic component initialization
Set an id attribute named root
on a global container from where components will be watched for initialization.
<app-root id="root"></app-root>
Import lib/fluid-design-system.js
then lib/auto-init.js
directly in your main app code.
import '@engie-group/fluid-design-system/lib/fluid-design-system';
import '@engie-group/fluid-design-system/lib/auto-init';
Don’t use custom tags unless you want to.
<nj-alert> <- remove custom tag
<div class="nj-alert nj-alert--primary" role="alert">
...
</div>
Initialization via WebComponents
1) Install additional modules
Required npm modules |
---|
Popper.js |
web-animations-js |
@webcomponents/webcomponentsjs |
@webcomponents/custom-elements |
If your application build es5 javascript, you need to include custom-elements-es5-adapter.js
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
If your application must be compatible with browser not supporting custom tag, you also have to install the @webcomponents/custom-elements
polyfill:
import '@webcomponents/custom-elements/custom-elements.min.js';
2) Make sure that Angular includes the CUSTOM_ELEMENTS_SCHEMA
schema:
// src/app/app.module.ts
...
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...
@NgModule({
...
schemas: [CUSTOM_ELEMENTS_SCHEMA],
...
})
3) Initiate components
Import the library
// src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import { NJWC } from '@engie-group/fluid-design-system/lib-esm/fluid-design-system';
export class AppComponent implements OnInit {
ngOnInit() {
// Initialize every components
NJWC.AutoInit();
// Initialize a single component
// NJWC.Form.init();
}
}
Import a single component
// src/app/app.component.ts
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormWC } from '@engie-group/fluid-design-system/lib-esm/components/form';
export class SpecificComponent implements OnInit {
ngOnInit() {
FormWC.init();
}
}
Example
You could have a look at a todo list application example.
Troubleshooting
If you have any issues while getting set up with Fluid Design System, please create an issue or a request on our library git repository. No newline at end of file