Pre-selecting options in Angular ng-multiselect-dropdown

Question

I'm using the ng-multiselect-dropdown in Angular to create a multi-select drop-down as a custom header. What I cannot seem to figure out is if there is a way to set which values I would pre-selected in the list. Here is now my drop-down is coded:

<ng-template *ngIf="column.dropdown" let-column="column" let-sort="sortFn" 
             ngx-datatable-header-template>
  <ng-multiselect-dropdown [placeholder]="column.name"
             class="d-inline-block" [data]="this[column.prop]"
             [settings]="dropdownSettings">
  </ng-multiselect-dropdown>
</ng-template>

Is there a property I can set that will pre-select certain values in the list? I haven't been able to find any documentation on how to do this. Thanks in advance.

can you provide us a plunker, jsfiddle or something like that, please? — Johnson
– Johnson, Commented Jul 12, 2018 at 18:44

Hafnernuss · Accepted Answer · 2019-11-07 10:30:08Z

6

Here, the ng-multiselect-dropdown pre-selection option value binds with ngModel and also I have shown the validation for ng-multiselect-dropdown:

<ng-multiselect-dropdown
    formControlName="location"
    id="location"
    [data]="supplierList"
    [(ngModel)]="selectedSupplier"
    [settings]="supplierDropDownSettings"
    (onSelect)="onLocationSelect($event)">
</ng-multiselect-dropdown>
<div *ngIf="submitted && formGroup.controls['location'].invalid"
    class="text-danger mt-1">
    <div *ngIf="formGroup.controls['location'].errors.required">
                            This filed is required
    </div>
</div>

public selectedSupplier: Array<SupplierModal> = [];
public warehouse: SupplierModal = { "id": 1, "name" : Company }
this.selectedSupplier = new Array<SupplierModal>();
this.selectedSupplier.push(this.warehouse);

edited Nov 7, 2019 at 10:30

Hafnernuss

2,8792 gold badges33 silver badges47 bronze badges

answered Nov 7, 2019 at 9:31

Dhairya Bhavsar

3394 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gihanmu Over a year ago

this.myForm = this.fb.group({ city: [this.selectedItems] }); Setting the selected item through formGroup fixed the issue for me. Follow exact steps in nileshpatel17.github.io/ng-multiselect-dropdown

Sushil · Accepted Answer · 2020-04-12 19:36:42Z

2

Component HTML (With FormControl)

<ng-multiselect-dropdown
 [placeholder]="'Select Controller'"
 [data]="controllerList"
 formControlName="controller"
 [settings]="dropdownSettings"
 (onSelect)="onItemSelectController($event)"
 (onSelectAll)="onSelectAllController($event)" 
 (onDeSelect)="onItemDeSelectController($event)"  
 (onDeSelectAll)="onDeSelectAllController($event)" 
 (onDropDownClose)="onDropDownCloseController()">
</ng-multiselect-dropdown>

Component TS (With FormControl)

controllerList: any;
addRoleForm: FormGroup;

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

this.addRoleForm = this.formBuilder.group({    
      controller: ['', Validators.compose(
        [Validators.required]
      )]          
});

ngAfterViewInit(){
  this.selectedConcrollers = [
    {item_id: 1, item_text: 'value'},
    {item_id: 1, item_text: 'value'}
  ];

  this.addRoleForm.patchValue({
    controller: this.selectedConcrollers 
  });
}

answered Apr 12, 2020 at 19:36

Sushil

2,5102 gold badges29 silver badges27 bronze badges

1 Comment

tala9999 Over a year ago

This is the right solution because using [(ngModel)]="selectedItems" within reactive form will be prohibited in future Angular (check warning in the console when doing that).

Wings · Accepted Answer · 2020-10-10 15:28:54Z

2

.push() didn't work for me, seems like component is not reacting to push event.. I had to replace whole array in order to make it work.

<ng-multiselect-dropdown [(ngModel)]="selected" ...></ng-multiselect-dropdown>

this.selected = [{item_id: 1, item_name: 'xxxxx'}, {item_id: 2, item_name: 'yyyyyy'}];

answered Oct 10, 2020 at 15:28

Wings

5827 silver badges15 bronze badges

Comments

Mike · Accepted Answer · 2018-08-14 18:22:24Z

1

I suppose I should have read the API documentation more carefully. It actually specifies how to do this by setting the [(ngModel)] attribute on the ng-multiselect-dropdown tag.

answered Aug 14, 2018 at 18:22

Mike

2693 gold badges9 silver badges22 bronze badges

2 Comments

Max Alexander Hanna Over a year ago

so weird. this is working only if there is nothing wrapping the push statement...

OwlR Over a year ago

In my case, item is not displayed 'selected' in drop-down list though it is displayed 'selected' in header / closed drop-down state. Why?

satit · Accepted Answer · 2019-07-02 16:06:50Z

1

<ng-multiselect-dropdown [(ngModel)]="selected" ...></ng-multiselect-dropdown>

In typescript:

this.selected.push({item_id: 1, item_name: 'xxxxx'});

answered Jul 2, 2019 at 16:06

satit

213 bronze badges

Comments

HaniQudsi · Accepted Answer · 2020-04-11 09:41:43Z

1

ts file:

dropdownList = [];
selectedItems = [];
dropdownSettings = {};
this.dropdownList = [
    { item_id: 1, item_text: 'Mumbai' },
    { item_id: 2, item_text: 'Bangaluru' },
    { item_id: 3, item_text: 'Pune' },
    { item_id: 4, item_text: 'Navsari' },
    { item_id: 5, item_text: 'New Delhi' }
];
this.selectedItems = [
    { item_id: 3, item_text: 'Pune' },
    { item_id: 4, item_text: 'Navsari' }
];

html file:

<ng-multiselect-dropdown
  [placeholder]="'custom placeholder'"
  [data]="dropdownList"
  [(ngModel)]="selectedItems"
  [settings]="dropdownSettings"
>
</ng-multiselect-dropdown>

Source: https://www.npmjs.com/package/ng-multiselect-dropdown

answered Apr 11, 2020 at 9:41

HaniQudsi

398 bronze badges

1 Comment

Francis Ducharme Over a year ago

It makes no sense to have to provide the item_text for the selected items, the component already has them in dropDownList. I only keep ids in the backend, not the names. This is not a very good component.

Abhishek Upadhyay · Accepted Answer · 2023-06-09 04:49:20Z

0

You can still use ngModel inside the formGroup if its a standalone property or else it will give error

answered Jun 9, 2023 at 4:49

Abhishek Upadhyay

374 bronze badges

Collectives™ on Stack Overflow

Pre-selecting options in Angular ng-multiselect-dropdown

7 Answers 7

1 Comment

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related