@eqproject/eqp-select v3.0.2

Table of contents

• Getting started
• API
• Reload data
• Use Cases
• Multi-language
• Credits

Required

• Angular Material installed and imported

Getting started

Step 1: Install eqp-select:

NPM

npm install --save @eqproject/eqp-select

Step 2: Import the EqpSelectModule and install :

import { EqpSelectModule } from '@eqproject/eqp-select';

@NgModule({
  declarations: [AppComponent],
  imports: [EqpSelectModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

API

Inputs

N.B. One of EnumData or ArrayData is required

Outputs

Reload data

When your datasource changes, you can update the datasource inside the select calling the function "reloadData", as follows:

  reload() {
    this.selectToReload.reloadData();
  }

It will work for both arrayData and enumData changes.

Use cases

Case 1: Select with arrayData and ngModelInput

Define selector in html for normal use

  <eqp-select 
    [arrayData]="dataSource" 
    [isSearchable]="true" 
    [(ngModelInput)]="selectWithArrayData" 
    placeholder="Seleziona elemento" 
    (ngModelInputChange)="selectChange($event)"
    [includeFullObject]="false" 
    [arrayKeyProperty]="'Key'"
    [arrayValueProperty]="'Description'">
  </eqp-select>

Define variables and functions in ts file

  dataSource : Array<{Key: string, Description: string}>;
  selectWithArrayData: any;
  
  ...

  selectChange(event) {
    // Body
  }

Case 2: Multi-select with enumData and form control

Define selector in HTML

    <eqp-select 
        [enumData]="testEnum" 
        [isMultiSelect]="true"
        placeholder="Seleziona elemento" 
        (formControlChange)="selectChange($event)"
        [formGroupInput]="formGroup"
        [formControlNameInput]="'selectWithEnumData'">
    </eqp-select>

Define variables and functions in ts file

  testEnum = TestEnum;
  formGroup: FormGroup;
  
  ...

  createForm() {
    this.formGroup = this.formBuilder.group({
      selectWithEnumData: []
    })
  }

  ...

  selectChange(event) {
    // Body
  }

Case 3: Multi-select with select all

Define selector in HTML

    <eqp-select 
        [enumData]="testEnum" 
        (formControlChange)="selectChange($event)"
        [formGroupInput]="formGroup"
        [formControlNameInput="'selectWithEnumDataAndSelectAll'"
        [isMultiSelect]="true"
        [selectAll]="true"
        [selectableGroupAsModel]="true"
        placeholder="Seleziona elemento"> 
    </eqp-select>

Define variables and functions in ts file

  testEnum = TestEnum;
  formGroup: FormGroup;
  
  ...

  createForm() {
    this.formGroup = this.formBuilder.group({
      selectWithEnumDataAndSelectAll: []
    })
  }

  ...

  selectChange(event) {
    // Body
  }

Multi-language

To use multilanguage, set to true the input boolean variable and pass a string that can be used to find the element inside the translation JSON

    <eqp-select 
        [enumData]="testEnum" 
        [isMultiSelect]="true"
        placeholder="Seleziona elemento" 
        (formControlChange)="selectChange($event)"
        [formGroupInput]="formGroup"
        [formControlNameInput]="'selectWithEnumData'"
        [isMultiLanguage]="true"
        [multilanguagePrefixKey]="'ENUMS.TEST.'">
    </eqp-select>

Then, where you set the language to use, like on login page or in navbar to switch language

    this.translateHelper.loadJsonLanguage("en", jsonObject);

Credits

This library has been developed by EqProject SRL, for more info contact: info@eqproject.it