semantic ui - How to set default value in angular(4)? -

below html code of if able 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 code controller class.

import { component, oninit } '@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 set initial default value dropdown? wanted know if it's correct way display values in dropdown?

thanks

you've use ngmodel , set property in 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 } '@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); }  }