sv-tree-view

Angular Shortcode

SvTreeView

Table of Contents

• Live Demo | Stackblitz
• Installation
• Options
• Usage
• Example
• Author
• Contact

Demo

---

✨ Angular Shortcode ✨

✨ 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

1. Tree Interface

interface Tree {
  [key: string]: any;
  expanded?: boolean;
  disabled?: boolean;
  selected?: boolean;
  children?: Array<Tree>;
}

2. 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

• Angular Shortcode
• Mehdi Sadeghian
• Samira Vahidi

linedIn

• Mehdi Sadeghian
• Samira Vahidi

Keywords

---

Shortcode Angular