PLATFORM_README.md

Fundamental NGX

Description

   The @fundamental-ngx/platform is built on top of the @fundamental-ngx/core to enhance existing functionality.

  Provide a higher abstraction for the components by hiding most of the internal implementation details which boosts developer productivity.

  Components must be instantiable programmatically.

  Enterprise readiness:

    1. Working with data( reactive stream over the array, Data sources over the reactive steam)

    2. Layouts (Dashboard, detail page, master/detail page, Search/result page).

   It is not about UI:

    1. Application state UI     2. Bootstrapping and Configuration     3. Communication with the backend system.       Example:

 This example captures several things:

   a). How we abstract form assembly that me as developer I dont deal with layouting of elements for labels, controls, hints, etc..

   b). Assembly like this gives pretty big space in terms of different layouts that we want to support in the application (1 colum, 2 colums)

   c). If we need to group information into sections

   d). How we are handling and forms errors        e). Dropdown usage. Everything is happening inside the component that manages the iteration of the items we just pass list of values.

<fdp-form-group [isFiveZoneLayout]="true" labelLayout="floating"
                    [formGroup]="fg" [errorHanlding]="'navigate'"
                    (onSubmit)="save($event)" (navigateToError)="onGoToError($event)">

    <fdp-form-field label="email" id="email" zone="left">
        <fdp-input type="email" placeholder="email" [required]="true"></fdp-input>
    </fdp-form-field>

    <fdp-form-field reqiuire="true" label="My Favorite Colors" id="colors" hint="Pick one of your favorite color" zone="right">
        <fdp-select [list]="myColors"></fdp-select>
    </fdp-form-field>

    <fdp-form-field label="Description" id="desription" zone="bottom">
        <fdp-text-area [autoSizeEnabled]="true"></fdp-text-area>
    </fdp-form-field>
    </fdp-form-group>

    <fdp-form-group [isFiveZoneLayout]="true" labelLayout="floating"
                        [formGroup]="fg" [errorHanlding]="'navigate'">
        
        <fdp-form-section title="Basic Information">
        <fdp-form-field label="email" id="email" zone="left">
            <fdp-input type="email" placeholder="email" [required]="true"></fdp-input>
        </fdp-form-field>
        <fdp-form-field reqiuire="true"
                        label="My Favorite Colors"
                        id="colors" hint="Pick one of your favorite color" zone="right">
            <fdp-select [list]="myColors"></fdp-select>
        </fdp-form-field>
    </fdp-form-section>
        <fdp-form-field label="Description" id="desription" zone="bottom">
            <fdp-text-area [autoSizeEnabled]="true"></fdp-text-area>
        </fdp-form-field>
    </fdp-form-group>

API Reference

See Component Documentation for examples and API details.

Requirements

To download and use Fundamental NGX, you will first need to install the node package manager.

Fundamental NGX is intended for use with Angular 5 or newer.

Prior knowledge of Angular is recommended.

Getting Started

For an existing Angular CLI application,

1. Install Fundamental-NGX. ng add @fundamental-ngx/platform For models prior to 0.11.1 use fundamental-ngx

   If you do not use the Angular CLI or if this command does not work for you, please see the full installation guide.

2. Import the modules you want to use.

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

   import { FundamentalNgxPlatformModule } from '@fundamental-ngx/platform';
   
   @NgModule({
       ...
       imports: [FundamentalNgxPlatformModule],
   })
   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 models prior to 0.11.1 use fundamental-ngx

   import { ToggleModule } from '@fundamental-ngx/core';

   @NgModule({ ... imports: [ToggleModule], }) export class DemoModule { }

3. Add the component to your HTML.

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

Tests

Fundamental NGX makes use of Jasmine and Karma for its unit tests.

Run ng test @fundamental-ngx/platform. Append --code-coverage to generate code coverage documentation.

For models prior to 0.11.1 use fundamental-ngx

Versioning

The @fundamental-ngx/platform library follows Semantic Versioning. These components strictly adhere to the [MAJOR].[MINOR].[PATCH] numbering system (also known as [BREAKING].[FEATURE].[FIX]).

For models prior to 0.11.1 use fundamental-ngx

Merges to the master branch will be published as a prerelease. Prereleases will include an rc version (e.g. [MAJOR].[MINOR].[PATCH]-rc.[RC]).

Known Issues

Please see Issues.

Support

If you encounter an issue, you can create a ticket.

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.