CODEWITHSUNDEEP
angularangular-ng-if
Milad
Milad

Reputation: 95

angular 4 ngIf alternative

I have a drop-down menu that you could choose the currency and based on the chosen currency, but right now I'm using ngif to show the currency but and it works fine with only two currencies but for more currencies I have to add more ngif and to me that's not logical since the HTML code for that page is going to be huge ( 100 different currencies = 100 ngif's)

this is what I have now:

Company.ts

   currencyItems: string[] =  ['MXN', 'PHP'];
   currency: string = this.currencyItems[0];

company.html

<div class="col-md-5" *ngIf = "currency = 'MXN'">
      <input type="number" name="mxn" id="mxn" [(ngModel)]="newCompany.currency.mxn" class="form-control">
</div>


<div class="col-md-5" *ngIf = "currency = 'PHP'">
      <input type="number" name="php" id="php" [(ngModel)]="newCompany.currency.php" class="form-control">
</div>

what i want to achieve is, is there any way that I only have one block of code something like that

<div class="col-md-5">
      <input type="number" [(ngModel)]="newCompany.currency.<changes base on drop-down selection>" class="form-control">
</div>

and also 

<td>{{company.currency.mxn}}</td>

to

<td>{{company.currency.<changes base on drop-down selection>}}</td>

I know I can use ngSwitch, but that's still is going to be lots of code too.

Upvotes: 0

Views: 2180

Answers (1)

LLai
LLai

Reputation: 13406

Use a separate property altogether. For example selectedCurrency. Then when a new option is selected from the dropdown, assign it to selectedCurrency

<div class="col-md-5">
    <input type="number" [(ngModel)]="selectedCurrency" class="form-control">
</div>

<td>{{selectedCurrency}}</td>

Upvotes: 1

Related Questions