Angular Set Select Option Selected

To set select option value selected in Angular, simply create the select option dropdown, and can use setValue & patchValue of FormGroup to set the default, dynamically, programmatically of select option value of dropdown in Angular applications on reactive forms.

Here are three ways to set the dropdown’s select option value in Angular by default, dynamically, and programmatically:

Option 1: Set the default value in select option in angular reactive forms

To set default value in select dropdown option in angular with reactive forms; Simply create dropdown list and use formGroup directive on html template and then set default select option on component and bind it to the form control.

Simply create select dropdown option like the following in app.component.html file:

<div style="text-align: center;">
<h1>Set Default Select Option Value</h1>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="dropdown">Select an option:</label>
  <select id="dropdown" formControlName="dropdown">
    <option value="Option 1">Option 1</option>
    <option value="Option 2">Option 2</option>
    <option value="Option 3">Option 3</option>
  </select>
  <br>
  <button type="submit">Submit</button>
</form>

</div>

Now set the default select option and bind with formGroup like the following in app.component.ts file:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      dropdown: ['Option 2'] // Default selected value
    });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

Option 2: Dynamically set selected value of dropdown in angular reactive form

To create select option dropdown value in angular with reactive form and then use patchValue() method of fromGroup and bind it with html template to set option value dynamically in angular application.

To create a select dropdown option list on reactive form in html template with formGroup like the following:

<div style="text-align: center;">
<h1>Set Dynamically Select Option Dropdown Value</h1>
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <label for="dropdown">Select an option:</label>
  <select id="dropdown" formControlName="dropdown">
    <option *ngFor="let option of options" [value]="option">{{ option }}</option>
  </select>
  <button type="button" (click)="setOption('Option 2')">Set Option 2</button>
  <button type="submit">Submit</button>
</form>

</div>

To set the dropdown’s selected option value dynamically in a reactive form, simply use the formGroup patchValue() method and bind it to an HTML template like the following and it done:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;
  options = ['Option 1', 'Option 2', 'Option 3'];

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      dropdown: [''] // No default selected value
    });
  }

  setOption(option: string) {
    this.myForm.patchValue({ dropdown: option });
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

Option 3: Set select option value programmatically in angular

To set selection option value programmatically in Angular; You have to use setValue() method of ForGroup with your select dropdown options.

To create a dropdown option list use FormGroup as follows:

<div style="text-align: center;">
<h1>Set Programmatically Select Option Value</h1>
<form [formGroup]="myForm">
  <label for="dropdown">Select an option:</label>
  <select id="dropdown" formControlName="dropdown">
    <option *ngFor="let option of options" [value]="option">{{ option }}</option>
  </select>
</form>
<button (click)="setOption('Option 2')">Set Option 2</button>


</div>

Next, use setValue() method of formGroup to set programmatically select option value in angular like the following:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  myForm: FormGroup;
  options = ['Option 1', 'Option 2', 'Option 3'];

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      dropdown: [''] // No default selected value
    });
  }

  setOption(option: string) {
    this.myForm.get('dropdown').setValue(option);
  }

  onSubmit() {
    console.log(this.myForm.value);
  }
}

Conclusion

That’s it; you have learned how to set default, programmatically, and dynamically select option value of dropdown in angular applications.

Recommended Tutorials