# axiom-ngx-tree

> A tree component for angular, support nested object,async data,instant search,...

Latest version **1.0.1** (published 2019-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install axiom-ngx-tree
pnpm add axiom-ngx-tree
yarn add axiom-ngx-tree
bun add axiom-ngx-tree
```

## 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.1 |
| Published | 2019-04-07 |
| First published | 2019-01-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 286.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mohammad Musaei |
| Maintainers | mohammad.musaei |
| Keywords | angular, tree, component, angular tree, ngx-tree, typescript, javascript, axiom |

## Links

- npm: https://www.npmjs.com/package/axiom-ngx-tree
- Repository: https://github.com/mohammadmusaei/AxiomTree
- Homepage: https://github.com/mohammadmusaei/AxiomTree#readme
- Issues: https://github.com/mohammadmusaei/AxiomTree/issues
- npm.io page: https://npm.io/package/axiom-ngx-tree

## Dependencies (1)

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

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2019-04-07
- 1.0.0 — 2019-01-30
- 0.0.8 — 2019-01-27
- 0.0.7 — 2019-01-27
- 0.0.6 — 2019-01-27
- 0.0.5 — 2019-01-27
- 0.0.4 — 2019-01-27
- 0.0.3 — 2019-01-27
- 0.0.2 — 2019-01-27
- 0.0.1 — 2019-01-27

## README

# Axiom Tree


### Online Demo

[Usage Demo](http://app.musaei.me/angular/tree/)

### Stackblitz Demo

[Edit demo on stackblitz](https://stackblitz.com/edit/axiom-ngx-tree)

### Installation

##### Install component package from npm :

`npm install axiom-ngx-tree`

##### Import component module :

```typescript
import { AxiomNgxTreeModule } from 'axiom-ngx-tree';

...

@NgModule({
  imports: [
    BrowserModule,
    AxiomNgxTreeModule,
  ], 
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

...

```

### Usage

```html

<ax-ngx-tree [axData]="data" 
    (axSelect)="select($event)" 
    [axSearch]= "search"
    [axSearchValue]="model" 
    [axTitle]="'country'" 
    [axId]="'id'" 
    [axSelectable]="true"
    [axDragDrop]="true"
    [axCollectionItem]="'items'" 
    (axSelection)="selected($event)"
    [axTemplate]="t">
</ax-ngx-tree>

```

##### Use custom templates for nodes

First, Create a template tag then use `item` property to access node data

```html

<ng-template #t let-item="item">
    {{ item.first_name }} {{ item.last_name }}
</ng-template>

```

Then pass custom template reference to `[axTemplate]` input parameter

```html

[axTemplate]="t"

```

### Drag and drop support

For add drag and drop feature just set `[axDragDrop]` property value to true

![Alt Text](https://media.giphy.com/media/iOyDWDp3aKvHwPBxMU/giphy.gif)

### @Input() Params

| Name | Usage |
| ------ | ------ |
| axId | Data uniqueidentifier property name |
| axTitle | Default node title (Used in nodes without custom template ) |
| axCollectionItem | Name list propery (like items in an object) |
| axSearchValue | Search model value for providing instant search |
| axSelectable | Make tree selectable |
| axSearch | Search function with type (item: any, search: string): boolean |
| axTemplate | Make custom node template |
| axDragDrop | Add drag and drop feature |
| axAsync | Set tree to work async |
| axLeaf | Data propery name to check a node is leaf in data tree or not (Just use in async mode) |
| axAsyncReader | Reader function to get async data for inner nodes |
| axData | Tree data |

### @Output() Params

| Name | Usage |
| ------ | ------ |
| axSelection | Emit an array containing selected nodes |
| axSelect | Emit a object refers to current node |


## License

[MIT](http://opensource.org/licenses/MIT)

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