Drop Down with tree view (angular data in list (ul and li tags) how can i bring this data in drop down (select tag) )

Anita

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

<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?

Kartik

Replied on April 04, 2018

Try this.

</option>

</select>

amruta

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