Full Installation Guide

The motivation behind this wiki is to advice what steps need to be done in order to start using Fundamental Library for Angular.

It is applicable for an existing Angular application. In case you want to create a new application from scratch you can use @angular/cli.

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)
   

   For fundamental-ngx version 0.16.* or higher - The fonts and the icons must be added to your project separately.Fonts and icons can be found at @sap-theming/theming-base-content.

   Add the following to your css:
   
   @font-face {
    font-family: '72';
    src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff') format('woff');
    font-weight: normal;
    font-style: normal;
   }
   
   @font-face {
    font-family: '72';
    src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
   }
   
   @font-face {
    font-family: '72';
    src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
   }
   
   @font-face {
    font-family: 'SAP-icons';
    src: url('~@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/SAP-icons.woff') format('woff');
    font-weight: normal;
    font-style: normal;
   }
   

   Also, install fundamental-styles library:

   npm install --save fundamental-styles
   

   In the styles array of the angular.json file add:

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

   For fundamental-ngx up to version 0.16.* - Include the font and icons files from Fundamental Library Styles CSS in the styles array of the angular.json file.

   For fundamental-ngx with version 0.12.* or higher

   "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 { FundamentalNgxCoreModule } from '@fundamental-ngx/core';
   // For versions prior to 0.10 use:
   // import { FundamentalNgxModule } from 'fundamental-ngx';
   
   
   @NgModule({
       ...
       imports: [FundamentalNgxCoreModule],
       // for versions prior to 0.10 use instead:
       // 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 Checkboxes, add the following import to your main application module.

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

4. Add the component to your HTML.

   <fd-checkbox label="Fundamental Ngx Checkbox"></fd-checkbox>