# ngx-group-by-alphabetes

> Angular library - Group your list alphabetically.

Latest version **1.0.2** (published 2019-10-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-group-by-alphabetes
pnpm add ngx-group-by-alphabetes
yarn add ngx-group-by-alphabetes
bun add ngx-group-by-alphabetes
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-10-05 |
| First published | 2019-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 66.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Kaustubh Khare |
| Maintainers | kaustubhkhare19 |
| Keywords | angular5, angular6, angular7, angular8, order, sort, filter, alphabetically |

## Links

- npm: https://www.npmjs.com/package/ngx-group-by-alphabetes
- Repository: https://github.com/kaustubhkhare19/ngx-group-by-alphabetes
- Homepage: https://github.com/kaustubhkhare19/ngx-group-by-alphabetes#readme
- Issues: https://github.com/kaustubhkhare19/ngx-group-by-alphabetes/issues
- npm.io page: https://npm.io/package/ngx-group-by-alphabetes

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Recent versions

- 1.0.2 (latest) — 2019-10-05
- 1.0.1 — 2019-10-04
- 1.0.0 — 2019-10-02

## README

# ngx-group-by-alphabetes
Angular library - Group by your list alphabetically

It has two way to display list

- Without Sort Key (Array of Strings).
- With Sort Key (Array of Objects).

**Note** :- Sorting will be done within the component with ascending order(A-Z).

## Install

`npm install ngx-group-by-alphabetes --save`

## Usage

| Param | Type |  Details |
| ------ | ------ | ------ | 
| input | array | array of string or object to group alphabetically.|
| sortKey | string | Sort key is required for input type array.|

**Events**
- onItemClick(element) - Click event for list item.
- onHeaderClick(header) - Click event for alphabet header.

Import `GroupByAlphabetesModule` module to your **app.module.ts**

```
import { NgModule } from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';

import { GroupByAlphabetesModule } from 'ngx-group-by-alphabetes';

@NgModule({
  imports: [BrowserModule, GroupByAlphabetesModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}
```
**Without Sort Key (Array of Strings)**
Input is array or string. For this type `sortKey` is not required.

**In HTML template**
```
<group-by-alphabetes [input]="input" (itemClick)="obj = $event"></group-by-alphabetes>
```

**In Compontent**
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  input = ["John", "Mary", "Mike", "Julie", "Adam"];
}
```
**With Sort Key (Array of Objects)**
Input is array or objects. For this type `sortKey` is required.

**In HTML template**
```
<group-by-alphabetes [input]="input" [sortKey]="sortKey" (itemClick)="obj = $event"></group-by-alphabetes>
```

**In Compontent**
```
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  input = [{"name": "John"}, {"name": "Mary"}, {"name": "Mike"}, {"name": "Julie"}, {"name": "Adam"}];
  sortKey = 'name';
}
```

**CSS**

You can apply your custom CSS to list item and header. `alphabete-value` class for list item and `alphabete-header` class for header.
Add this CSS classes into `style.css`.


## License
[MIT](https://tldrlegal.com/license/mit-license) © [Kaustubh Khare](https://github.com/kaustubhkhare19)

---
_Source: https://npm.io/package/ngx-group-by-alphabetes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._