CODEWITHSUNDEEP
angularhtml-select
michelemalagnini
michelemalagnini

Reputation: 159

Angular preselect select option

I need to prepopulate the first value of the options drop-down menu with the value of a variable when loading a component. (This value comes from a db, but to simplify everything I have populated it manually.) The options are loaded dynamically with an ngFor cycling through an array. I would like the first option to be the value of firstColor.

Here is a stackbliz with the code example.

Component:

import { Component, VERSION } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  name = "Angular " + VERSION.major;

  firstCar: String = "";
  colors: any[] = [];
  firstColor: any[] = [];
  ngOnInit() {
    this.firstCar = "audi";

    this.firstColor = [
      {
        name: "bianco",
        code: "#ffffff"
      }
    ];

    this.colors = [
      {
        name: "rosso",
        code: "#ff0000"
      },
      {
        name: "bianco",
        code: "#ffffff"
      },
      {
        name: "nero",
        code: "#000000"
      }
    ];
  }
}

Template

<h1>primo esempio</h1>
<label for="cars">Choose a car: </label>

<select name="cars" id="cars">
  <option value="volvo">volvo</option>
  <option value="saab">saab</option>
  <option value="mercedes">mercedes</option>
  <option value="audi">audi</option>
</select>

<h1>secondo esempio</h1>
<label for="cars">Choose a color: </label>

<select name="colors" id="colors">
  <option *ngFor="let c of colors" [ngValue]="c">
    {{c.code}}
  </option>
</select>

Upvotes: 4

Views: 3974

Answers (3)

Parameshwar
Parameshwar

Reputation: 966

We just need to assign the intended value to

[(ngModel)]=" "

following is object in ts having model object and dropdown data

modelobj:any = {"occupation":""};

OccupationfieldDropDownData:any=[{label:"Service",id:1},{label:"Student",id:2},{label:"Housewife",id:3},{label:"Landlord",id:4},{label:"Business",id:5},{label:"Professional",id:6},{label:"Agriculture",id:7},{label:"Others",id:8}];

in template .html

<select class="form-control" #occupation required [(ngModel)]="modelobj.occupation" name="occupation">
  <option value="default">Please Select</option>
  <option *ngFor="let obj of OccupationfieldDropDownData" [value]="obj.id">
      {{obj.label}}
  </option>
</select>

now preselecting (simply set value for [(ngModel)]="value")

preselectDropDown()
{
  this.modelobj.occupation = "6";
  //this will map the id and label will be shown as selected
}

Upvotes: 0

Pavithra Muthusamy
Pavithra Muthusamy

Reputation: 305

<select name="colors" id="colors">
  <option *ngFor="let color of colors" [selected]="color['name'] === this.firstColor[0]['name']" >
    {{color['code']}}
  </option>
</select>

Upvotes: 0

Pawel
Pawel

Reputation: 555

Try something like this:

<select name="colors" id="colors">
  <option *ngFor="let c of colors" [ngValue]="c" [selected]="c.name === this.firstColor[0].name" >
    {{c.code}}
  </option>
</select>

You can also change firstColor from array of objects to just object, and then the solution would be:

<select name="colors" id="colors">
  <option *ngFor="let c of colors" [ngValue]="c" [selected]="c.name === this.firstColor.name" >
    {{c.code}}
  </option>
</select>

Upvotes: 2

Related Questions