Md-select value not changing after select

Question

I have a problem with a md-select component using Angular and Angular Material 2. When I change the value of select it works, but the value of the md-select stays the same, which in my case is the default selected option "LTC". I need to show the current selected option and not the default selected option. Thanks for your help!

component.ts

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

@Component({
  selector: 'app-allcoins',
  templateUrl: './allcoins.component.html',
  styleUrls: ['./allcoins.component.scss']
})
export class AllcoinsComponent implements OnInit {

  regTypeSelectedOption: string = "LTC";
  selectedNav: any; 
  navs = ['LTC', 'ETH', 'ZEC', 'XRP']

  constructor() { }

  setNav(nav:any){
    this.selectedNav = nav;
        if(this.selectedNav == "LTC"){
            this.regTypeSelectedOption = "LTC";
        }
        else if(this.selectedNav == "ETH"){
            this.regTypeSelectedOption = "ETH";
        }
        else if(this.selectedNav == "ZEC"){
            this.regTypeSelectedOption = "ZEC";
        }
        else if(this.selectedNav == "XRP"){
          this.regTypeSelectedOption = "XRP";
      }
    }

  ngOnInit() {
    this.selectedNav = 'select value';
  }

}

html

<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header card-header-text">
                        <h4 class="card-title">Comprar Criptodivisas</h4>
                        <p class="category">Seleccione la criptodivisa que desea comprar</p>
                    </div>
                    <div class="card-content">
                        <md-select placeholder="Moneda" [(ngModel)]="regTypeSelectedOption">
                            <md-option [value]="regTypeSelectedOption" (click)="setNav(item)" *ngFor="let item of navs">{{item}}</md-option>
                        </md-select>
                        <app-comprarzec *ngIf="regTypeSelectedOption === 'ZEC'"></app-comprarzec>
                        <app-comprarxrp *ngIf="regTypeSelectedOption === 'XRP'"></app-comprarxrp>
                        <app-comprarltc *ngIf="regTypeSelectedOption === 'LTC'"></app-comprarltc>
                        <app-comprareth *ngIf="regTypeSelectedOption === 'ETH'"></app-comprareth>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

you should use the change event on this case (change)="" it will let you controll every time a new option is selected so it will fire the event.

For your problem, you are telling that all values are [value]="regTypeSelectedOption" and you specified that it is "LTC" as default, you only need to use regTypeSelectedOption at NgModel, but not on the value.

EDIT

In your case (As you can see the value of the md-options equals to the item):

<md-option [value]="item" (click)="setNav(item)" *ngFor="let item of navs">{{item}}</md-option>

Hope it works.