How to design tree style multi-select dropdown

Viewed 177

I need to design tree style dropdown in angular. Sample image is attached in here. When user tick the list item, the items print on the label.

enter image description here

I need to add sub category just like in image ex: N1 , N1.1, N1.2. How to do it?

This is my existing code. I use Angular multi-dropdown with selection. I need to modify this code to tree view. In the dropdown First item 'North spine' has sub categories 'N1', 'N1.1', 'N1.2' and 'N1.3'. So same as existing item it need to print on the label when user tick it(Refer the attached image). When user tick every item will display on label and can remove from it.

<div class="col-sm-6 form-group">
            <label for="Building">Authorized Building</label>
            <ng-multiselect-dropdown 
                [placeholder]="'Select the Building'" 
                [settings]="dropdownSettings"
                [data]="dropdownList" 
                [(ngModel)]="selectedItems" 
                (onSelect)="onItemSelect($event)"
                (onSelectAll)="onSelectAll($event)">
            </ng-multiselect-dropdown>
        </div>

export class UserComponent implements OnInit {

  dropdownList: { item_id: number; item_text: string; }[] = [];
  selectedItems: { item_id: number; item_text: string; }[] = [];
  dropdownSettings : IDropdownSettings;

  constructor(public service: UserService) { }

  ngOnInit(): void {

   

    //dropdown list value
    this.dropdownList = [
      { item_id: 1, item_text:'North Spine'},
      { item_id: 2, item_text: 'Academics' },
      { item_id: 3, item_text: 'Staff Housing' },
      { item_id: 4, item_text: 'Student Hall' },
    ];
    this.selectedItems = [
      { item_id: 3, item_text: 'North Spine' },
      { item_id: 4, item_text: 'Academics' }
    ];
    
    this.dropdownSettings = {
      singleSelection: false,
      idField: 'item_id',
      textField: 'item_text',
      selectAllText: 'Select All',
      unSelectAllText: 'UnSelect All',
      itemsShowLimit: 4,
      allowSearchFilter: true
    };

  }

 
  //dropdownlist
  onItemSelect(item: any) {
    console.log(item);
  }
  onSelectAll(items: any) {
    console.log(items);
  }

}
0 Answers
Related