We support #BlackLivesMatters !
If you support us then follow us by clicking here and following us!

How to Add Comma separated Object types into NgFor loop?

Get support on Angular & Typescript related technology.
Post Reply
admin
Site Admin
Posts: 44

How to Add Comma separated Object types into NgFor loop?

Post by admin » Mon Sep 09, 2019 3:37 am

Image
Suppose you have below object:

Code: Select all

rates = { 
    "USD": 1, 
    "AED": 3.672057, 
    "VND": 23112.280702, 
    "ZAR": 14.803694 
    }
As you can see above is the comma separated object key values, now you want to use above data to be rendered as html by using ngFor then:

app.component.html

Code: Select all


<p>
<a class="dropdown-item w-r" *ngFor="let cur of rates | keyvalue" (click)="onCurrency(cur)" ><br>{{cur.key}} : {{cur.value}}</a> 

</p>
app.component.ts

Code: Select all

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  

  rates = { 
    "USD": 1, 
    "AED": 3.672057, 
    "VND": 23112.280702, 
    "ZAR": 14.803694 
    }
}

Demo:
https://ngforkeyvalue.stackblitz.io

Post Reply