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