Setting a Default Value in Select Option in Angular: Best Practices and Examples

Setting a default value in select option in Angular is a general requirement in most of the applications. You may find yourself wanting to set a default value in your select options in your Angular app on different occasions. From building a form to displaying a set of options, defining a default value for an option when the page first loads can make it easier for people to use. 

This can be particularly helpful when certain fields have a common or recommended default. With the two-way data binding and the form controls in Angular, you can handle such a scenario quite comfortably.

In this blog post, let’s discuss the various ways through which we can apply the default select value. You will also learn some best practices as well as some real-world examples in order to implement this in an efficient way.

Why Set a Default Value?

Having a default value for a select option is more than a decorative feature; it is good for all of the following reasons :

1. User assistance: If there is a commonly selected value or recommended value, it can make form filling easier if it is preselected.
2. Form validation: The default value will ensure your form looks good when it loads by providing a text box that is already filled out and that aligns properly with other fields.
3. Better User Experience: A well-thought-out form with reasonable default values decreases user input, increasing user satisfaction.
   

How to Set a Default Value in a Select Option Using Angular

There are numerous techniques for setting a default value in a select option in Angular language. In this section, we’ll cover methods using ngModel, the selected property, and Reactive Forms.

Basic Example of List:

HTML

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

TypeScript

options = [  
  { value: '1',  label: 'Option 1' },
  { value: '2',  label: 'Option 2' }
];

1. Using Model to Set Default Values

If you’re using template-based forms, ngModel is your friend. One of the simplest ways to set a default value in a select option is by using the ngModel command. This directive allows for two-way data binding between the select element and a variable in your component.

Example:

//Component.ts

export class AppComponent {
  selectedCountry = 'US'; // Default selected value
  countries = [
    { code: 'US', name: 'United States' },
    { code: 'CA', name: 'Canada' },
    { code: 'UK', name: 'United Kingdom' }
  ];
}

//Component.html

<select [(ngModel)]="selectedCountry" name="country">
  <option *ngFor="let country of countries" [value]="country.code">
    {{ country.name }}
  </option>
</select>

Explanation:

• The [(ngModel)]=”selectedCountry” binds the selected value.
  
• The default selection will be “United States” when the component loads.

Best Practice:

• Always ensure that your model value “selectedCountry” is initialized in the component class (component.ts).
• Just make sure that the default value is part of the option list of the select element so that it won’t trigger validation errors.
• ngModel is great for basic forms, but it’s usually not a good idea to use it for those long, complicated forms that have dozens of fields. In that case, you might want to use reactive forms.

2. Using the Selected Property

The next technique to set a default value is by utilizing the selected property directly on the option elements. In this approach, the selected property is bound to a condition that verifies if the option value and the required default value match. While possible, this is not recommended in Angular due to better alternatives like ngModel.

Component.html

<select>
    <option [selected]="color === 'red'" value="red">Red</option>
    <option [selected]="color === 'green'" value="green">Green</option>
    <option [selected]="color === 'black'" value="black">Black</option>
    <option [selected]="color === 'white'" value="white">White</option>
</select>
<p>Selected Color: {{ color }}</p>

Component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss'],
})
export class AppComponent {
    color: string = 'green'; // Default value
}

Explanation:

• The selected property is bound to a condition that checks if the `color` variable matches the option value.
• The default value is set to `’green’`, so this option is selected when the component initializes.

Essential Practices :

1. Make sure that the condition bound to the selected property precisely reflects default value.
2. To avoid multiple default selections, only one option must have the selected property set to true.

This method can make the template more verbose, especially with many options. Consider using reactive forms or otherwise ngModel for cleaner code.

3. Using Reactive Forms to Set Default Values

Reactive Forms offers a more robust and extensible way to manage form data in Angular. You can set default values for select options using the FormControl or FormGroup APIs.

Component.html

<form [formGroup]="userForm">
    <select formControlName="country">
        <option *ngFor="let country of countries" [value]="country.value">{{ country.name }}</option>
    </select>
</form>

Component.ts

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

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    userForm: FormGroup;
    countries: any[] = [
        { name: 'Australia', value: 'Australia' },
        { name: 'Canada', value: 'Canada' },
        { name: 'United States', value: 'USA' },
        { name: 'India', value: 'India' },
        { name: 'China', value: 'China' },
    ];
constructor(private fb: FormBuilder) {
        this.userForm = this.fb.group({
            country: ['USA', Validators.required], // In the Form control we setting the default value
        });
    }

ngOnInit(): void {
        // Optionally, you can set the default value in ngOnInit
        // this.userForm.get('country')?.setValue('USA');
    }
}

Explanation :

• Reactive Forms use the FormControl’s initial value as the selected one.
• formControlName=”country” links the dropdown to the form control.

Essential Practice :

1. You can also patch or reset the form control value dynamically using:

this.countryForm.get('country')?.setValue('UK')

2. Set the default value when initializing the form control or form group.
3. Use *ngFor to handle dynamic data and ensure that the default value is part of the data source.
4. Apply validators to ensure the form remains valid even when the default value is set.

Best Practices and Common Pitfalls

These are some common best practices and pitfalls that one needs to understand before working on this task:

Best Practices:

• Initialize your model early: Always set a default value in your component class during initialization to avoid errors.
  
• Ensure the value types match: Make sure that the type of your default value (string, number, object) matches the option values in your select element.
  
• Use trackBy: Use trackBy when rendering options. It helps with performance and avoids change detection issues.

<option *ngFor="let country of countries; trackBy: trackByCode" [value]="country.code">
  	{{ country.name }}
</option>

trackByCode(index: number, item: any): string {
  	return item.code;
}

• Use a fallback option: Provide a placeholder like “Please select” if the selection is optional.

<option value="" disabled selected>Select your country</option>

Common Pitfalls:

• Not initializing the model: Ensure that the model or form control is properly initialized to avoid issues with missing default selections.
  
• Mismatching value types: Using objects instead of primitive values (like strings or numbers) in the <option> values can cause issues.
  
• Using selected attributes manually: Angular’s two-way binding or Reactive Forms make this unnecessary.

Finally, let us end this section with some common advice. The challenge we discussed above is just a simple one, and just one out of several challenges that you may encounter during development.

The challenge you encounter may vary depending on the size and complexity of your project, your issues can be few or many. If you think you can’t do the project, find experts who will do it.

If you are working on a small or one-time project, then hire Angular developers. They can help you integrate features quickly and efficiently.

For larger applications, consider working together with an Angular development company. An experienced company can help ensure that your form handling is optimized and scalable as your project grows.

Conclusion

Setting a default value in Angular’s select options is simple when done right. Whether you’re using ngModel or Reactive Forms, the key is to ensure your form data is initialized and matches the option values. 

Each method has its own benefits and best practices that needs to be followed. Choose the approach that best fits your application’s requirements and complexity. 

When you are dealing with simple forms or reactive forms of greater complexity, Angular offers flexibility to set reasonable default values to improve the user experience. By adopting the practices presented here, you can easily transform your forms into more user-friendly, predictable, and maintainable ones.