Full Installation Guide

For an existing Angular application,

1. Installing with angular-cli

   ng add @fundamental-ngx/core
   //For versions prior to 0.10 use fundamental-ngx (ng add fundamental-ngx)
   

2. Installing without angular-cli.

   npm install --save @fundamental-ngx/core
   //For versions prior to 0.10 use fundamental-ngx (npm install --save fundamental-ngx)
   

   Include Fundamental Styles CSS in the styles array of the angular.json file.

   For ngx with version 0.12.* or higher

   "node_modules/fundamental-styles/dist/fonts.css",
   "node_modules/fundamental-styles/dist/icon.css",
   

   For ngx with version lower than 0.12.0

   "node_modules/fundamental-styles/dist/fundamental-styles.min.css"
   

   Configure your animations.

   Install angular animations by running the following.

   npm install @angular/animations
   

   Once the above package is installed, import BrowserAnimationsModule to enable the animations.

   import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
   
   @NgModule({
     ...
     imports: [BrowserAnimationsModule],
     ...
   })
   export class DemoModule { }

   Alternatively, you can disable the animations by importing NoopAnimationsModule instead.

3. Import the modules you want to use.

   To add the entire library, add the following import to your main application module.

   import { FundamentalNgxModule } from '@fundamental-ngx/core';
   //For versions prior to 0.10 use fundamental-ngx
   
   
   @NgModule({
       ...
       imports: [FundamentalNgxModule],
   })
   export class DemoModule { }

   To include an individual Angular Fundamental component in your application, you only need to import the relevant module.

   For example, to use Toggles, add the following import to your main application module.

   import { ToggleModule } from '@fundamental-ngx/core';
   
   //For versions prior to 0.10 use fundamental-ngx
   
   
   @NgModule({
       ...
       imports: [ToggleModule],
   })
    export class DemoModule { }

4. Add the component to your HTML.

   <fd-toggle [size]="'l'" [(checked)]="checked">Large Toggle</fd-toggle>