FNG3-AUI Library

This library contains Angular 2+ components that and are compatible with angular 1, styled with FNG3-AUI Framework Git NPM.

Components

[x] Date Picker [ ] Dropdown [ ] List

Last Update

22/08/19 Trying to create the Documentation

In the Future

• Unit Test

Installation

Run npm install fng3-aui-com-lib@latest --save in your project.

How to use

1. Importing Modules/ Components to an Angular 2 module: import {SharedModule} from "fng3-aui-com-lib" import {Fng3AuiDatePickerWrapperComponent} from "fng3-aui-com-lib"

2. How to use the imported components on Angular 2 and on Angular1:

• On Angular2: After importing the desired component or module, the component’s selector will be immediately available for use on the view of the component. <fng3-aui-date-picker-wrapper> </fng3-aui-date-picker-wrapper>

• On Angular1: You need an angular hybrid module (Containing both Angular1 & Angular 2 logic)

  • Import the desired Module and Component. import {SharedModule} from "fng3-aui-com-lib" import {Fng3AuiDatePickerWrapperComponent} from "fng3-aui-com-lib"

  • Import the downgrade component module from angular: import { downgradeComponent } from "@angular/upgrade/static";

  • On the angular 2 side of the module add your imported module on the imports array. @NgModule({ imports: [SharedModule], exports: [], declarations: [], entryComponents: [], providers: []})

  • On the angular 1 side of the module use the imported downgradeComponent to downgrade our angular 2 Component NameOfAngular1Module.directive('Fng3AuiDatePickerWrapper', downgradeComponent({ component: Fng3AuiDatePickerWrapperComponent, inputs: [], outputs: [] }) as angular.IDirectiveFactory);

• Use it on the view: The angular component is ready to be used <fng3-aui-date-picker-wrapper> </fng3-aui-date-picker-wrapper>