Yammer Yammer Yammer email

Angular integration

Start with the installation of Fluid Design System in the Angular framework

v4.0.0-beta.3

Installation

1) 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

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.

npm install popper.js

‘web-animations-js’required to use the Alert, Fab, Tag components..

npm install web-animations-js

2) Now add the required @webcomponents/webcomponentsjs polyfill:

npm install @webcomponents/webcomponentsjs

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:

npm install @webcomponents/custom-elements

3) Include the polyfill(s) in your application:

// src/polyfill.ts
import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js';
// Include the line below only if your application must be compatible with the Edge web browser
// import '@webcomponents/custom-elements/custom-elements.min.js';

4) Finally, 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],
  ...
})

Usage

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

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