@eqproject/eqp-select-next

Table of contents

• Getting started
• Use Cases
• MultiLanguage
• API
• Credits

Required

• [x] 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 {}

Use

Step 3: Use Example in class :

Define selector in html for normal use

    <eqp-select [(ngModelInput)]="ObjectProperty" [arrayData]="ArrayOfObjects" [arrayKeyProperty]="'key'" [arrayValueProperty]="'value'" [enumData]="Enum" [label]="'Mat Select Test'"></eqp-select>

Define formControlName properties

    <eqp-select [formControlNameInput]="formControlNameProperty" [formGroupInput]="formGroupExample" [(ngModelInput)]="ObjectProperty" [arrayData]="ArrayOfObjects" [arrayKeyProperty]="'key'" [arrayValueProperty]="'value'" [label]="'Mat Select Test'"></eqp-select>

Define variables in ts file

  genderEnum = GenderEnum; //Enum variable

  companyTypes: any[] = [{ key: 1, value: 'Codice Fiscale' }, { key: 2, value: 'Partita iva' }]; //Array of objects

  currentCompany = 2; //NgModel property

Multilanguage

Step 4(not required): Use Multilanguage :

To use multilanguage, set to true the input boolean variable

    <eqp-select [isMultiLanguage]="true" [(ngModel)]="ObjectProperty" [arrayData]="ArrayOfObjects" [enumData]="Enum" [label]="'Mat Select 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);

Where translateHelper is a service that need to be imported in constructor component as public.

loadJsonLanguage need to set current language, first parameter check the language to use, in the second we need to pass the entire Json for selected language

API

Inputs

Input	Type	Default	Required	Description
[ngModelInput]	any	-	no	Binded property of object.
[EnumData]	Enum	-	yes	Variable with Enum type.
[ArrayData]	Array<objects>	-	yes	Array of objects that select will show, the structure need to be {keyProperty: '', valueProperty: ''}
[arrayKeyProperty]	string	-	yes	string that will be the key property
[arrayValueProperty]	string	-	yes	string that will be the value property
[label]	string	-	no	Placeholder
[isMultiLanguage]	boolean	false	no	If true, see section and examples about use, if not interested in use, set to false or don't write it
[formControlNameInput]	string	false	no	formControlName defined in ts formGroup control
[formGroupInput]	string	false	no	FormGroup name, in case of formControlNameInput, that property need to be repeated for EVERY eqp-select used

N.B. One of EnumData or ArrayData is required

Credits

This library has been developed by EqProject SRL, for more info contact: [e-mail]