ff-select-input

##Getting started

Installation

#####To install this library, run:

$ npm install ff-select-input --save

Include to your module

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import library
import { FFSelectInputModule } from 'ff-select-input';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify library as an import
    FFSelectInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once ff-select-input is imported, you can use its component in your Angular application:

<!-- Now you can use library component in your.component.html
     Put your options array to [options] property. It's required.   
     Options array should match to 
interface FFOptionsListInterface {
  text: string | number;
  value: string | number | boolean;
} 
-->
<ff-select-input [options]="[{value: 0, text: '1'},
                 {value: 1, text: '2'},
                 {value: 2, text: '3'},
                 {value: 3, text: '4'}]">
</ff-select-input>

API

Selector: ff-select-input

Properties

interface FFOptionsListInterface {
  text: string | number;
  value: string | number | boolean;
}

  @Input() options: FFOptionsListInterface[];

The [options] attribute is required attribute. You should put here array of your options. !IMPORTANT make sure that your options match to FFOptionsListInterface;

  @Input() multiSelect: boolean = false;

The [multiSelect] attribute let you use multi select.

  @Input() parentContainer: HTMLElement;

The [parentContainer] attribute sets max height and position of drop-list regarding parent element. Example: <div class="myWrapper" #wrapper> <ff-select-input [options]=[...] [parentContainer]="wrapper">

  @Input() disabled: boolean = false;

If [disabled] is true - component adds css class "disabled" and disabled this input

  @Input() value: string | number | boolean | (string | number | boolean)[];
  @Input() defaultValue: string | number | boolean | (string | number | boolean)[];

The [value] attribute sets current value. It can be string, number or boolean type and for multi select - arrays of these types.

  @Input() defaultValue: string | number | boolean;

The [defaultValue] attribute works only with multi select. Users will see this value when all options are unchecked.

  @Output() input: EventEmitter<string | number | boolean | (string | number | boolean)[]>;

Event triggered when user selects any option.

Example

app.component.html

<div class="myBorders" #parent>
<!-- Simple select -->
  <ff-select-input [disabled]="disabled" [value]="0"
                   [options]="[{value: 0, text: '1'},
                   {value: 1, text: '2'},
                   {value: 2, text: '3'},
                   {value: 3, text: '4'}]"
                   [parentContainer]="parent"
  ></ff-select-input>
<!-- Multiple select -->
  <ff-select-input [value]="['a','c']" (input)="log($event)" [multiSelect]="true"
                   [defaultValue]="'x'"
<!-- ! Note that OPTION with value equals to defaultValue will be dropped from options list -->
<!-- User will see this option value in select only when nothing selected-->
                   [options]="[{value: 'x', text: 'Nothing selected'},
                               {value: 'a', text: 'A'},
                               {value: 'b', text: 'B'},
                               {value: 'c', text: 'C'},
                               {value: 'd', text: 'D'}]"
                   [parentContainer]="parent"
  ></ff-select-input>
</div>

app.component.css

.myBorders {
  height: 500px;
  border: 2px solid red;
  width: 500px;
  margin: 20px auto;
  position: relative;

  ff-select-input:last-child {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

app.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'ff-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  disabled: boolean = false;

  log(e) {
    console.log(e);
  }
}

License

MIT © Frontend Freelancer