Ng Fancy GUI

This package contains components, for creating userinterfaces in a Angular app.

You can play with the components here

Installation

npm i ng-fancy-gui

Add to app module or any other Angular module.

// src/app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {NgFancyGUIModule} from 'ng-fancy-gui'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgFancyGUIModule  //<-- added here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import styles

// src/styles.scss
@import '~ng-fancy-gui/scss/style.scss';

If you want to prevent your browser from negative scrolling add the following CSS to your global stylesheet. This is recommended if you are using the image input or the imagecropper (as overlay).

html {
  overflow: hidden;
}

body {
  top: 0;
  left: 0;
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: auto;
}

Important: The scroll event is now fired on the body object, not the window object.

Customize styles

// customize to your needs
$inputElementsColor: rgb(25, 123, 204);
$border-color: gray;
$font-color: black;
$invalid: red;

// must be importet after variable definitions
@import '~ng-fancy-gui/scss/style.scss';

Components

Keywordpicker

Usage

Inputs

input	description
config: KeywordPickerConfig	Defines how the keywordpicker behaves
source: string[] | KeyValue[]	Array with autocompleteitems. This input is only used if datasource is set to Input and autocompleteMode is set to true.
invalid: boolean	Changes the appearance of the inputelement to a invalid state if it is set to true
placeholder: string	Placeholder of the keywordpicker

<fg-keyword-picker 
                [placeholder]="null" 
                [config]="null" 
                [source]="null"
                [invalid]="false">
</fg-keyword-picker>

Configurtaion

You can configure the behavior of the keywordpicker by defining a keywordpickerconfig object and passing it into the keywordpicker component.

The constructor of the keywordpickerconfig class takes the following parameters:

parameter	description
keywordType: KeywordType	Defines the type of a keyword item
autocompleteMode: boolean	Defines if a autocomplete dropdown is shown. Setting this value to true also means, that you can not pick a keyword if it does not exist in the autocomplete dropdown.
autoCompleteSource: AutoCompleteSource	Defines how the autocomplete items are retrived
dataMapperFunction: (x: any | any[])=> KeyValue[] | string[]	This value only takes effect if autocompleteSourceMode is set to true. Pass in a function, which maps the autoCompleteSource to a array matching the type selected at the keywordType parameter (x represents the API response).
autocompleteSourceUrl: string	Only takes effect if autoCompleteMode is set to true and autocompleteSource is set to ApiEndpoint

Example autocomplete with the source API:

public keywordPickerConfig: KeywordPickerConfig = new KeywordPickerConfig(
    KeywordType.KeyValue,
    true,
    AutCompleteSource.ApiEndpoint,
    (x: any[]) => {
      return x.map<KeyValue>(x => {
        return {
          key: x.id,
          value: x.name
        }
      });
    },
    "https://api.thecatapi.com/v1/breeds"
  );

Reactive forms

Write value

value: string[] | KeywordSourceItem[] depending on the keywordtype parameter

Value

value: string[] | KeywordSourceItem[] depending on the keywordtype parameter

Imageinput

<fg-input-image [width]="750" [height]="500" [invalid]="false"></fg-input-image>

Reactive forms

Write value

value: string (imagepath)

Value

value: string (base64 encoded image)

Rangeinput

<fg-input-range [value]="2" [min]="0" [max]="100"></fg-input-range>

Reactive forms

Write value

value: number

Value

value: number

Betweeninput

<fg-input-between [min]="0" [max]="100"></fg-input-between>

Reactive forms

Write value

[min: number, max: number]

value

[min: number, max: number]

Imagecropper

Usage

Inputs

input	description
config: ImageCropperConfig	Defines how the imagecropper behaves
imageSrc: string	Path to the image wich should be cropped

Outputs

output	description
cancle	Is emitted when user clicks on the cancle button of the imagecropper
continue: string(base64 encoded image)	Is emitted when user clicks on the continue button of the imagecropper

<fg-image-cropper
                  [config]="null"
                  (cancle)="null"
                  (continue)="null"
                  [imageSrc]="null">
</fg-image-cropper>

Configuration

You can configure the behavior of the keywordpicker by defining a imageCropperConfigObject and passing it into the keywordpicker component.

The constructor of the keywordpickerConfigClass takes the following parameters:

parameter	description
width: number	Defines the width of the outputimage
height: number	Defines the height of the outputimage
rasterlevels: number[]	Defines the levels of rasters

Example:

 public cropperConfig: ImageCropperConfig = new ImageCropperConfig(
    500,
    600,
    [4, 8, 16]
  );

Sliderinput

Usage

Inputs

input	description
iconPath: string	Path to a image
additive: string	String which will be added after the displayed value

Outputs

output	description
change: number	Emmits the new value

<fg-slider (change)="null" [iconPath]="null" [additive]="null"></fg-slider>

Reactive forms

Currently not supported

Infinite Slider

Usage

Outputs

output	description
change: number	Emmits -1 if slided right, emmits 1 if slided left

<fg-slider-infinite (change)="null"></fg-slider-infinite>

Reactive forms

Currently not supported