sv-tree-view
v0.0.13
Published
<p align="center"> <img style="text-align: center" src="https://angular-shortcode.web.app/assets/icons/logo-128.png"/> <h1 align="center">Angular Shortcode</h1> </p>
Downloads
4
Readme
SvTreeView
Table of Contents
Demo
✨ Stackblitz ✨
Installation
Install with NPM
npm i sv-tree-view
Options
| Name | Type | Default Value |Description | | --------------------- |:---------------:|:--------------:|------------| | treeList | Array | Reference-1 | | fieldName | string | label | | checkbox | boolean | false | | draggable | boolean | false | | autoCheck | boolean | false | | customTemplate | Template | Reference-2 | | @Output() rowClick | Tree | | | @Output() rowExpand | Tree | | | @Output() rowSelect | Tree | | |@Output() changeRowIndeterminateStatus | Tree | |
Reference
- Tree Interface
interface Tree {
[key: string]: any;
expanded?: boolean;
disabled?: boolean;
selected?: boolean;
children?: Array<Tree>;
}
- Template example
<ng-template #template let-data="data">
<label>{{data.label}}</label>
</ng-template>
Usage
Import SvStarRatingModule in your app
import { SvTreeViewModule } from 'sv-tree-view';
@NgModule({
imports: [
...
SvTreeViewModule
],
...
})
export class AppModule { }
Example
Simple Usage
<sv-tree-view
[treeList]="treeList"
[autoCheck]="true"
[checkbox]="true"
[draggable]="true"
(rowClick)="rowClick($event)"
(rowExpand)="rowExpand($event)"
(changeRowIndeterminateStatus)="changeRowIndeterminateStatus($event)">
</sv-tree-view>
Custom Template Usage
<sv-tree-view
[treeList]="treeList"
[customTemplate]="template"
(rowClick)="rowClick($event)">
<ng-template #template let-data="data">
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%">
<div style="display: flex; align-items: center">
<img style="width: 25px; height: 25px; border-radius: 50%; margin-right: 8px" *ngIf="data.image" [src]="data.image" alt="Avatar">
{{data.label}}
</div>
<div *ngIf="data?.children?.length" style="background-color: #ececec; border-radius: 50%; padding: 2px 8px">
{{data?.children?.length}}
</div>
</div>
</ng-template>
</sv-tree-view>
Author
Mehdi Sadeghian
Samira Vahidi
Contact
github
linedIn
Keywords
Shortcode Angular