# @eqproject/eqp-select-next

> Generic Material select

Latest version **0.5.3** (published 2022-07-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @eqproject/eqp-select-next
pnpm add @eqproject/eqp-select-next
yarn add @eqproject/eqp-select-next
bun add @eqproject/eqp-select-next
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.3 |
| Published | 2022-07-21 |
| First published | 2022-07-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 291.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | EqProject |
| Maintainers | eqp |

## Links

- npm: https://www.npmjs.com/package/@eqproject/eqp-select-next
- npm.io page: https://npm.io/package/@eqproject/eqp-select-next

## Dependencies (4)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0
- [@ngx-translate/core](https://npm.io/package/@ngx-translate/core.md) ^14.0.0
- [ngx-mat-select-search](https://npm.io/package/ngx-mat-select-search.md) ^4.2.0
- [@ngx-translate/http-loader](https://npm.io/package/@ngx-translate/http-loader.md) ^7.0.0

## Recent versions

- 0.5.3 (latest) — 2022-07-21
- 0.5.1 — 2022-07-20
- 0.5.0 — 2022-07-20
- 0.0.15 — 2022-07-19
- 0.0.14 — 2022-07-19

## README

Table of contents
=================

  * [Getting started](#getting-started)
  * [Use Cases](#use)
  * [MultiLanguage](#multilanguage)
  * [API](#api)
  * [Credits](#credits)

## Required
- [x] Angular Material installed and imported

## Getting started
### Step 1: Install `eqp-select`:

#### NPM
```shell
npm install --save @eqproject/eqp-select
```
### Step 2: Import the EqpSelectModule and install :
```js
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
```html
    <eqp-select [(ngModelInput)]="ObjectProperty" [arrayData]="ArrayOfObjects" [arrayKeyProperty]="'key'" [arrayValueProperty]="'value'" [enumData]="Enum" [label]="'Mat Select Test'"></eqp-select>
```
Define formControlName properties
```html
    <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
```js

  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
```html
    <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

```js
    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: info@eqproject.it

---
_Source: https://npm.io/package/@eqproject/eqp-select-next · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._