kossoy/fundamental-ngx

Angular components implementation of SAP Fundamental UI design guideline. The library is aiming to provide an Angular implementation of the components designed in Fundamental UI design system.

Fundamental NGX - Angular components for Fiori Fundamentals

Description

Fundamental NGX is a set of Angular components that utilize the Fiori Fundamentals library, making it easy to start developing Angular Fundamental apps.

View live demo here.

• GitHub repo of Vue implementation of SAP Fiori Fundamentals
• GitHub repo of React implementation of SAP Fiori Fundamentals

Requirements

To download and use this library, you first need to install the node package manager. https://www.npmjs.com/get-npm

Fundamental NGX is intended for use with Angular 5 or newer. You should have some knowledge of Angular before using this library.

Download and Installation

1. Download Fundamental NGX and Fiori Fundamentals

npm install --save fiori-fundamentals fundamental-ngx

2. Include the Fiori Fundamentals CSS in your Angular application. Open your angular.json file and add the following to the styles array:

"./node_modules/fiori-fundamentals/dist/fiori-fundamentals.css"

Note the path may be different if your CLI configuration is not in the root of your project directory or if you have set a custom root.

3. You can import all of Fundamental NGX at once, or you can import individual components as you need them. To import the whole library, add:

import { FundamentalNgxModule } from 'fundamental-ngx';

To your app's module definition. Also add FundamentalNgxModule to the imports array in the @NgModule declaration.

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

import { AlertModule } from 'fundamental-ngx/alert/alert.module';

to the file that declares the module you're adding alerts to. It can also be added to the app module declaration to be used site-wide. You also need to add AlertModule to your app or module's imports array.

4. Add the component to your HTML.

<fd-alert [dismissible]="true" type="warning" (close)="showAlert($event)"> A dismissible warning type alert. </fd-alert>

Demo Application

This repository contains a demo application in the docs/ directory. Run ng serve from the root of the repository to serve the app locally. The demo app utilizes the Angular Fundamental source code in this repository, so changes you make to any component's source will be reflected in the demo app.

View live demo here.

Tests

To run the unit tests for the fundamental-ngx component library, run ng test fundamental-ngx. Append --code-coverage to generate code coverage documentation.

Known Issues

Click here to view the current issues.

How to obtain support

If you encounter an issue, you can create a ticket or write an email to [email protected]

Contributing

If you want to contribute, please check the CONTRIBUTING.md documentation for contribution guidelines. Please follow the Angular commit message guidelines.

Check out the NEW_COMPONENT.md guide on building a new component for the library and creating the necessary documentation for your new component.

License

Copyright (c) 2018 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, v. 2 except as noted otherwise in the LICENSE file