Angular 10 Forms — select values from the dropdown

It's quite difficult for developers who work in an Angular project. This is because the syntaxes are getting changed for every release of an angular project that is happening in a span of 6 months. So, it is essential for developers to keep an eye on Angular guide and update their knowledge on the newer version and of course the syntaxes.

Today we are gonna see how the values are picked up from a dropdown in Angular Forms.

app.module.ts

Make sure to import FormsModule in the imports section.

import { NgModule } from '@angular/core';
@NgModule({
imports:      [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

app.component.html

Declare save function on submit, iterate the categories from the component.ts or fetch it from a database of your choice. Declare [(ngModel)] attribute for the select tag as mentioned below.

<form #f="ngForm" (ngSubmit)="save(f.value)">
  <div class="form-group">
    <label for="category">Category</label>
    <select [(ngModel)]="category" name="category" id="category">
      <option *ngFor="let c of categories" [value]="c">{{c}</option>
    </select>
  </div>
  <button>Save</button>
</form>

app.component.ts

Initialize categories array to show it in the HTML template.

export class AppComponent {
name = "Angular " + VERSION.major;
categories = ["Bread", "Fruits", "Seasonings"];
category;
save(product) {
  console.log(product);
}
}

browser console

Here we go. Upon changing the values and saving it, the values will be picked up.

{category: "Fruits"}
{category: "Seasonings"}

Kindly post your comments below. Thank you :)