Issue
I am trying for the collapsible/tree structure with CheckBoxs on both parent and child nodes. I haven't been able to create it exactly. I was able to create until unordered list from the JSON
{
"properties": {
"host": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"information": {
"properties": {
"filetype": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"author": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"authorcountry": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
}
}
},
"url": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"name": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"instrument": {
"properties": {
"Style": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"instrumentCode": {
"type": "integer"
},
"instrumentName": {
"type": "text"
},
"instrumentNumber": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
}
}
}
}
}
.html code
<button class="btn btn-primary" (click)="getData()">getData</button>
<h1>ul element</h1>
<hr>
<ul class="list-group" *ngFor="let x of inf | keyvalue">
<li class="list-group-item">{{x.key}}</li>
<ng-container *ngIf="x.value.hasOwnProperty('properties')">
<ul *ngFor="let y of x.value.properties | keyvalue">
<li>
{{y.key}}
</li>
</ul>
</ng-container>
</ul>
collapsible /tree structure.
Below is my Stackblitz link:
https://stackblitz.com/edit/angular-k5tdpe
I can try plugins also, but the input data format for the plugins was different angular2-tree plugin & ng2 -tree /ngx-tree, so any suggestions...
Solution
just add a input type check and use [(ngModel)]
<ul class="list-group" *ngFor="let x of inf | keyvalue">
<li class="list-group-item">
<!--add a input type checkbox and relation with x.check-->
<input type="checkbox" [(ngModel)]="x.check">
{{x.key}}</li>
<!---change the *ngIf to add the x.check condition-->
<ng-container *ngIf="x.check && x.value.hasOwnProperty('properties')">
<ul *ngFor="let y of x.value.properties | keyvalue">
<li>
{{y.key}}
</li>
</ul>
</ng-container>
</ul>
Updated if you want a "recursive component" its easy. I put an example, you can see the result in stackblitz
Basically a "recursive component is a component that in template has the same component. Typically we use a json model with properties children (yes, you can transform your "complex" json in some that has properties an children) If one time you create a jsondata with children, your json is like, e.g. like
data = [{
title: "uno", children: [
{ title: "uno-uno" }]
},
{
title: "dos", children: [
{ title: "dos-uno",children: [
{ title: "dos-uno" }
]},
{ title: "dos-dos" }]
}
]
We can have a app.component like
<li *ngFor="let item of data">
<app-li [title]="item.title" [children]="item.children"></app-li>
</li>
And our app-li like
<li (click)="check=!check">
<div [className]="children?check?'arrow-down':'arrow-up':'arrow-right'"></div>
{{title}}
</li>
<ul *ngIf="children && check">
<ng-container *ngFor="let item of children">
<app-li [title]="item.title" [children]="item.children"></app-li>
</ng-container>
</ul>
See that we feed the app-li with "children"
NOTE:I add a < div> with className to "simulate" the triangles
Updated 2 We can pass the own item itselft
The component becomes like
@Component({
selector: 'app-li',
template: `<li >
<div (click)="check=!check" [className]="item.children?
check?'arrow-down':'arrow-up':'arrow-right'">
</div>
<input type="checkbox" [(ngModel)]="item.select" >
<span (click)="check=!check">{{item.title}}</span>
</li>
<ul *ngIf="item.children && check">
<ng-container *ngFor="let item of item.children">
<app-li [item]="item" ></app-li>
</ng-container>
</ul>
`,
styleUrls: [ './hello.component.css' ]
})
export class HelloComponent {
@Input() item: any;
}
And the app
<li *ngFor="let item of data">
<app-li [item]="item" ></app-li>
</li>
Answered By - Eliseo
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.