Having an issue with the md-select component in Angular Material 2. When I change the value of the select, it updates correctly but the displayed value remains the default "LTC" option. I want to display the currently selected option instead of the default. Any assistance is appreciated!
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">Buy Cryptocurrencies</h4>
<p class="category">Select the cryptocurrency you want to buy</p>
</div>
<div class="card-content">
<md-select placeholder="Currency" [(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>