npm package: @ngx-reusable/common
Description: **@ngx-reusable** project is an **Angular** library that contains a collection of components, directives and pipes that we need in any project
Latest version: 14.2.2

# @ngx-reusable

**@ngx-reusable** project is an **Angular** library that contains a collection of components, directives and pipes that we need in any project

# @ngx-reusable/common

**@ngx-reusable/common** library contains multiple resuable directives and pipes.

## versions

| Angular Version | @ngx-reusable/common    |
| --------------- | ----------------------- |
| 14              | @ngx-reusable/common@14 |

## Directives

add `ReusableDirectivesModule` to your module:

    import { ReusableDirectivesModule } from "@ngx-reusable/common/directives";

- **Confirm:**

  - selector: `[confirm]`
  - usage: launch confirm prompt on element click:
  - `@Input() message?: string;`
  - `@Output() confirmed: EventEmitter<void>;`
  - `@Output() cancelled: EventEmitter<void>;`

  **Example:**
  `<button confirm message="Are you sure?" (confirmed)="doSomething()">`

- **MiddleClick:**

  - selector: `[mdlclick]`
  - usage: emit an event on mouse middle button click:
  - `@Output('mdlclick') event: EventEmitter<MouseEvent>;`

  **Example:**
  `<button (mdlclick)="doSomething()">`

- **RightClick:**

  - selector: `[rtclick]`
  - usage: emit an event on mouse right button click:
  - `@Output('rtclick') event: EventEmitter<MouseEvent>;`

  **Example:**
  `<button (rtclick)="doSomething()">`

- **CopyToClipboard:**

  - selector: `[copyToClipboard]`
  - usage: copy text to clipboard on element click:
  - `@Input('copyToClipboard') text!: string;`

  **Example:**
  `<button [copyToClipboard]="someTextToCopy">`

- **PasteFromClipboard:**

  - selector: `[pasteFromClipboard]`
  - usage: paste text from clipboard to `formControl` and emit event with text on element click:
  - `@Output('pasteFromClipboard') paste: EventEmitter<string>;`

  **Example:**
  `<button (pasteFromClipboard)="getSomeText($event)">`

## Pipes

### Array Pipes

Add ability to use native JavaScript array methods in HTML.

add `ReusableArrayPipesModule` to your module:

    import { ReusableArrayPipesModule } from "@ngx-reusable/common/pipes";

- **FilterPipe:**

  - `{{ array | filter: property: operator: expected }}`
  - **property**: for objects array to select property
    - pass `""` if array isn't array of objects
    - pass property name if proeprty is one level
    - if nested property pass it like: `level1.level1`
  - **operator**: `==`, `!=`, `<>`, `<`, `<=`, `>`, `>=`, `===`
  - **expected**: required value

  **Example:**
  `{{ arr | filter: 'count': '>=': 10 }}`
  will be translated to:
  `arr.filter(item => item['count'] >= 10)`

- **JoinPipe:**

  - `{{ array | join [: seperator] }}`
  - **seperator**: join method seperator

  **Example:**
  `{{ arr | join: ',' }}`
  will be translated to:
  `arr.join(',')`

### Object Pipes

Add ability to use native JavaScript object methods in HTML.
add `ReusableObjectPipesModule` to your module:

    import { ReusableObjectPipesModule } from "@ngx-reusable/common/pipes";

- **EntriesPipe:**

  - `{{ object | entries }}`

  **Example:**
  `*ngFor="let [key, value] for (object | entries)"`

- **KeysPipe:**

  - `{{ object | keys }}`

  **Example:**
  `*ngFor="let key for (object | keys)"`

- **ValuesPipe:**

  - `{{ object | values }}`

  **Example:**
  `*ngFor="let value for (object | values)"`

### String Pipes

Add ability to use native JavaScript string methods in HTML.
add `ReusableStringPipesModule` to your module:

    import { ReusableStringPipesModule } from "@ngx-reusable/common/pipes";

- **SplitPipe:**

  - `{{ str | split [: splitter [:limit]] }}`
  - **splitter:** split string by (default = "").
  - **limit:** limit number of generated items.

  **Example:**
  `*ngFor="let item for (strLikeArray | split: ',')"`