How can we shift all child elements to right side alignment inside multi select checkbox dropdown list in Angular?

Question

I need help on below scenarios,

I have one multiselect dropdownlist which using ng-multiselect-dropdown control in Angular and my Parent and Child items binding in it using below line of code in html file,

 <ng-multiselect-dropdown name="Countries" 
            [data]="Countries"  
            [(ngModel)]="selectedCountries"
            [settings]="dropdownSettings">
 </ng-multiselect-dropdown>

DropdownSettings code in TS file as below,

this.dropdownSettings = {
                singleSelection: false,
                idField: 'item_id',
                textField: 'item_text',
                selectAllText: 'Select All',
                unSelectAllText: 'UnSelect All',
                allowSearchFilter: true                
            };

I want to give right intendent to all child items which are display in dropdown list which uses 'ng-multiselect-dropdown' package as mentioned in above code So, How can we do that and what code I need to add or modify to shift my all child elements to the right hand side inside dropdownlsit?

Answer 1

You can add custom CSS to indent child items. First, add a customTemplate to your <ng-multiselect-dropdown> component:

<ng-multiselect-dropdown name="Countries" 
            [data]="Countries"  
            [(ngModel)]="selectedCountries"
            [settings]="dropdownSettings">
  <ng-template let-item="item" let-index="index">
    <div [ngClass]="{'indent-class': item.isChild}">
      {{ item.item_text }}
    </div>
  </ng-template>
</ng-multiselect-dropdown>

Then, in your CSS file, add the indent-class:

.indent-class {
  margin-left: 20px;
}

Finally, modify your data to include an isChild flag:

Countries = [
  { item_id: 1, item_text: 'Parent1', isChild: false },
  { item_id: 2, item_text: 'Child1', isChild: true },
  // ...
];

This will indent all items with isChild: true by 20 pixels.