Question

How to set the selected value in multiselect dropdown using Angular?

I'm trying to set a selected value in a multiselect dropdown in an Angular application. Can someone guide me on how to achieve this?

Answer 1

Example with [(ngModel)] (Template-driven Forms)

1.       HTML:

<select [(ngModel)]="selectedValues" multiple>

  <option *ngFor="let option of options" [value]="option">{{ option }}</option>

</select>

2.       Component:

import { Component } from '@angular/core';

@Component({

  selector: 'app-multiselect',

  templateUrl: './multiselect.component.html',

})

export class MultiselectComponent {

  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  selectedValues = ['Option 2', 'Option 3']; // Pre-selected values

}

Example with Reactive Forms

1.       HTML:

<form [formGroup]="form">

  <select formControlName="multiSelect" multiple>

    <option *ngFor="let option of options" [value]="option">{{ option }}</option>

  </select>

</form>

2.       Component:

import { Component, OnInit } from '@angular/core';

import { FormGroup, FormControl } from '@angular/forms';

@Component({

  selector: 'app-multiselect',

  templateUrl: './multiselect.component.html',

})

export class MultiselectComponent implements OnInit {

  options = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  form: FormGroup;

  ngOnInit() {

    this.form = new FormGroup({

      multiSelect: new FormControl(['Option 2', 'Option 3']), // Pre-selected values

    });

  }

}