Home  >  Forum  >  Angular
Post New Query

How to make the content of list (tree view data in list ul and li tags) expanded by default?



Asked on April 09, 2018
Hello,

I have an angular component with tree view data in list (ul and li tags).
I want the content of tree view expanded by default [at least first level should be expanded by default]. 

I have the following code:
In Html 

<ul style="list-style: none; Isexpanded:true" >
<li *ngFor="let contentNode of contentNodes" class="tree__branch" [ngClass]="{'tree__branch--has-children': contentNode.has_children}">
<a *ngIf="contentNode.has_children" (click)="contentNode.toggle=!contentNode.toggle" class="toggle">{{ !!contentNode.toggle ? '▼' : '▶' }}</a> <a [routerLink]="['/loc-admin/locationView', contentNode.pk_location_id]">📁</a>{{ contentNode.locationname }}
  <content-list *ngIf="contentNode.toggle" [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;
//console.dir(this.contentNodes);
//this.getContentNodes();
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;
}
// getContentNodes() {
// this._contentService.getChildLocations(this._startNodeId)
// .subscribe(
// contentNodes => this.contentNodes = contentNodes,
// error =>  this.errorMessage = <any>error
// );
// console.dir(this.contentNodes)
// }
toggleBranch(branchId:number){
console.log('branchId: ' + branchId);
}
}


Can any one give me the solution?


Thanks & Regards

Shilpa Kulkarni



Replied on April 12, 2018
If I remove  *ngIf="contentNode.toggle" from the following line, I am getting tree view in uncollapsible format, but then the toggle is not working.

 <content-list *ngIf="contentNode.toggle" [startingNode]="contentNode.pk_location_id"  [myData]="rows"></content-list>
</li>



Replied on April 12, 2018
I think the value of contentNode.toggle is false and hence <content-list> is not generated and you are getting list in collapsible format. Make it true by using (!) sign as *ngIf="!contentNode.toggle"


Try the following.

 <content-list *ngIf="!contentNode.toggle" [startingNode]="contentNode.pk_location_id"  [myData]="rows"></content-list>
</li>



Replied on April 12, 2018
Thank you. It worked.

Write Answer







©2019 concretepage.com | Privacy Policy | Contact Us