email

Angular integration

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

• Documentation
• Installation
  • Fonts and icons
  • Stylesheets
  • JSON imports
• Usage
• Troubleshooting

Documentation

Angular storybook documentation

Installation

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-angular

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.

If you don’t already import Lato and Google material icons font, you can do so by:

• Including 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');

• Including these fonts to your base index.html file

<link href="https://fonts.googleapis.com/css family=Material+Icons|Lato:300,400,700,900&amp;display=swap" rel="stylesheet"/>

Stylesheets

In order to add stylesheets of the library in your project you have to include them 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-tokens/lib/css/tokens.css",
                // Only if you want to use engie icons
                "node_modules/@engie-group/fluid-design-system/lib/components/icon/fluid.css"
            ],

JSON imports

In Fluid angular lib some types are generated using tokens, to get to these tokens we import a json file tokens.json provided by @engie-group/fluid-design-tokens. Since we rely on these import you’ll need add json imports support in your tsconfig file.

You’ll need to add the following in your tsconfig.json file: "resolveJsonModule": true in the compilerOptions section.

"compilerOptions": {
  "resolveJsonModule": true
},

Usage

In the angular module where you need to use a fluid component (usually in src/app.module.ts), you’ll need to import FluidModule

import {FluidModule} from '@engie-group/fluid-design-system-angular';

@NgModule({
  declarations: [
  ],
  imports: [
    FluidModule
  ],
  exports: [
  ],
  providers: [
  ]
})
export class ModuleName {
}

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