Drop Down with tree view (angular data in list (ul and li tags) how can i bring this data in drop down (select tag) )
Asked on April 04, 2018
I have an angular component with tree view data in list (ul and li tags) I want to bring this data in drop down (select tag)
In html I have
<ul style="list-style: none;">
<li *ngFor="let contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.has_children}">
<a (click)="contentNode.toggle=!contentNode.toggle">{{ !!contentNode.toggle ? '▼' : '▶' }}</a> {{ contentNode.locationname }}
<content-list [startingNode]="contentNode.pk_location_id" [myData]="rows"></content-list>
</li>
</ul>
In component.ts
export class ContentListComponent implements OnInit {
constructor (private _contentService: LocationService) {}
errorMessage: string;
@Input('startingNode')
private _startNodeId: string;
@Input('myData')
private _myData = [];
rows=[];
contentNodes: Location[];
bookFilteredList : Location[];
ngOnInit() {
this.rows=this._myData;
this.contentNodes=this.rows;
this.filter();
}
filter(){
//console.log('Excecute filter');
let storageId = this._startNodeId;
this.bookFilteredList = this.contentNodes.filter((book: Location) => book.parent_location_id === storageId);
this.contentNodes = this.bookFilteredList;
console.log(this.bookFilteredList);
return this.contentNodes;
}
}
Can any one give me the solution?
Replied on April 04, 2018
Try this.
<select name="locationId" ngModel>
<option *ngFor="let contentNode of contentNodes" [ngValue]="contentNode.pk_location_id">
{{ contentNode.locationname }}
</option>
</select>
Replied on April 12, 2018
@kartik
Even i am looking for the same example, i have tried your solution it is not displaying data in tree view in drop down. You kindly check this link (https://www.concretepage.com/forum/thread?qid=565) i have elaborated more.
Looking for your response.
Thanks
Amruta
Even i am looking for the same example, i have tried your solution it is not displaying data in tree view in drop down. You kindly check this link (https://www.concretepage.com/forum/thread?qid=565) i have elaborated more.
Looking for your response.
Thanks
Amruta
