Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component, Input, OnInit } from '@angular/core';
- @Component({
- inputs: ['item'],
- selector: 'node',
- template: `
- <li>
- <a class="iconButton" (click)="toggle()"> <i class="material-icons">Add</i>{{ item.label }}, {{ IsExpanded }}</a>
- <div *ngIf="IsExpanded">
- <ul *ngIf="item.subs">
- <template *ngFor="let subitem of item.subs">
- <node [item]="subitem"></node>
- </template>
- </ul>
- </div>
- </li>
- `
- })
- class Node implements OnInit {
- @Input() item: any;
- IsExpanded: boolean = false;
- ngOnInit() {
- console.log(this.item);
- }
- toggle() {
- this.IsExpanded = !this.IsExpanded;
- console.log(this.IsExpanded + ' ' + this.item.label);
- }
- }
- @Component({
- inputs: ['data'],
- selector: 'tree',
- template: `
- <ul>
- <template *ngFor="let item of data">
- <node [item]="item"></node>
- </template>
- </ul>
- `
- })
- class Tree {
- @Input() data: any[];
- }
- @Component({
- inputs: ['data'],
- selector: 'app-tree-view',
- template: '<tree [data]="data"></tree>'
- })
- export class TreeViewComponent {
- @Input()
- data: any[] = [
- {
- label: 'a1',
- subs: [
- {
- label: 'a11',
- subs: [
- {
- label: 'a111',
- subs: [
- {
- label: 'a1111'
- },
- {
- label: 'a1112'
- }
- ]
- },
- {
- label: 'a112'
- }
- ]
- },
- {
- label: 'a12',
- }
- ]
- },
- {
- label: 'b1',
- subs: [
- {
- label: 'b11',
- },
- {
- label: 'b12',
- }
- ]
- }
- ];
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement