Search code examples
angularangular-ngmodelangular2-ngmodelngmodel

How to set default selected values in multiselect with ngModel in Angular 2


How to set default selected values in multiselect. I get current_options and all_options from database and I want to update current_options and send new values do database again.

Updating database works but when I refresh page none of options are selected.

current_options = [{id:1, name:'name1'}];                    #from database
all_options = [{id:1, name:'name1'},{id:2, name:'name2'}];   #from database

My template:

<select multiple name="type" [(ngModel)]="current_options">
    <option  *ngFor="let option of all_options" [ngValue] = "option">
        {{option.name}}
    </option>
</select>`

Solution

  • If you want create multiple select and option with ngModel and set default value and two way bind its working code

    <div  *ngFor="let options of optionsArray; let in = index">
     <br>
     <select [(ngModel)]="res[in]" >
     <option  [ngValue]="option" *ngFor="let option of options.options; let i =index">
    
    
    {{option}}
    </option>
    </select>
     {{res[in]}}
    </div>
    {{res}}
    
    export class ExComponent implements OnInit {
    public res=[];
     public optionsArray = [
       {id: 1, text: 'Sentence 1', options:['kapil','vinay']},
       {id: 2, text: 'Sentence 2', options:['mukesh','anil']},
       {id: 3, text: 'Sentence 3', options:['viky','kd']},
      {id: 4, text: 'Sentence 4', options:['alok','gorva']},
    ]
    ngOnInit() 
    {
    this.optionsArray.forEach(data=>{
     this.res.push(data.options[0]);
    })
    }