CODEWITHSUNDEEP
angularnpm
Mike
Mike

Reputation: 269

Pre-selecting options in Angular ng-multiselect-dropdown

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.

Upvotes: 1

Views: 25539

Answers (7)

Abhishek Upadhyay
Abhishek Upadhyay

Reputation: 37

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

Upvotes: 0

Wings
Wings

Reputation: 582

.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'}];

Upvotes: 2

Sushil
Sushil

Reputation: 2490

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 
  });
}

Upvotes: 2

HaniQudsi
HaniQudsi

Reputation: 39

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

Upvotes: 1

Dhairya Bhavsar
Dhairya Bhavsar

Reputation: 339

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);

Upvotes: 6

satit
satit

Reputation: 21

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

In typescript:

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

Upvotes: 1

Mike
Mike

Reputation: 269

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.

Upvotes: 1

Related Questions