How to set default value in angular(4)?

Question

Below is html code with help of if i am able to display values in dropdown.

  <div class="field">
            <select class="ui dropdown" name="gender" ngModel>
              <option *ngFor="let gender of genderList">{{gender}}</option>
            </select>
  </div>

Here is code for controller class.

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

@Component({
  selector: 'app-add-member',
  templateUrl: './add-member.component.html'
})
export class AddMemberComponent implements OnInit {
    genderList: string[];

  constructor() {
    this.genderList=["Male","Female"];
  }

  ngOnInit() {
  }

  onSubmit(form: any): void{
    console.log('Form value = ', form);
  }

}

How can i set initial default value to dropdown? Also i wanted to know if it's correct way to display values in dropdown?

Thanks

Possible duplicate of [Angular 2 Dropdown Options Default Value](https://stackoverflow.com/questions/35978450/angular-2-dropdown-options-default-value) — AT82, Jul 28 '17 at 12:31
@Huangism, i googled but i am getting links for angular 1 and angular 2. It's angular 4 — Hitendra, Jul 28 '17 at 12:39
Angular4 is advanced version of angular 2, so you can get help from 2 — Sandip - Frontend Developer, Jul 28 '17 at 12:40
Perhaps there is more basic info you need to know then https://stackoverflow.com/questions/41692462/what-is-angular-4-and-from-where-i-can-learn-more-about-it — Huangism, Jul 28 '17 at 12:41
I tried this link https://stackoverflow.com/questions/35978450/angular-2-dropdown-options-default-value but it doesn't work. — Hitendra, Jul 28 '17 at 12:43

score 2 · Accepted Answer · edited Jul 28 '17 at 12:56

You've to use ngModel and set the property in your controller class

HTML:

<div class="field">
  <select class="ui dropdown" name="gender" [(ngModel)]="selectGender">
          <option *ngFor="let gender of genderList">{{gender}}</option>
    </select>
 </div>

Component.ts:

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

@Component({
selector: 'app-add-member',
templateUrl: './add-member.component.html'
})

export class AddMemberComponent implements OnInit {
genderList: string[];
selectGender: string;

constructor() {
this.genderList=["Male","Female"];
this.selectGender= this.genderList[0];
}

ngOnInit() {
}

onSubmit(form: any): void{
console.log('Form value = ', form);
}

}

Please take a look at how to handle duplicate questions: https://meta.stackexchange.com/a/10844 — AT82, Jul 28 '17 at 12:46

How to set default value in angular(4)?

1 Answers1