How to get comma separated KeyValue Pipe in Angular ?
The KeyValue Pipe is an Angular built-in feature that transforms objects or maps into an array of key-value pairs. We can use the last variable of *ngFor directive to achieve the desired result. We will compare that if the element is last then add a comma. In this article, we will learn how to get a comma-separated KeyValue Pipe in Angular.
Steps for Installing & Configuring the Angular Application
Step 1: Create an Angular application using the following command.
ng new appname
Step 2: After creating your project folder i.e. appname, move to it using the following command.
cd appname
Project Structure
It will look like the following:
Example 1: In this example, we use the last variable of *ngFor directive to achieve the desired result. We will compare that if the element is last then add a comma.
HTML
<!-- app.component.html --> < h2 style = "color: green" > w3wiki </ h2 > < h2 > How to get comma separated KeyValue Pipe in Angular? </ h2 > < div * ngFor = "let item of gfg | keyvalue; last as isLast" > < b >{{item.key}}:</ b > {{item.value}} < span * ngIf = "!isLast" >, </ span > </ div > |
Javascript
// app.component.ts import { Component, OnInit } from '@angular/core' ; import { KeyValue } from '@angular/common' ; import { Pipe, PipeTransform } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: "./app.component.html" , styleUrls: [ './app.component.css' ] }) export class AppComponent { gfg: any = { "HTML" : "Hyper Text Markup Language" , "CSS" : "Cascade Style Sheet" , "XML" : "Xtensive Markup Language" , "JS" : "Javascript" } } |
Javascript
// app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { HttpClientModule } from '@angular/common/http' ; import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Example 2: In this example, we will comma separate the array of JSON objects using keyvalue. The keyvalue will help to get the keys and values and then we will add a comma
HTML
<!-- app.component.html --> < h2 style = "color: green" > w3wiki </ h2 > < h2 > How to get comma separated KeyValue Pipe in Angular? </ h2 > < div * ngFor = "let item of gfg | keyvalue ; last as isLast" > < div * ngFor = "let element of display(item.value)|keyvalue" > < b >Value: </ b >{{element.value}} < span * ngIf = "!isLast" >, </ span > </ div > </ div > |
Javascript
// app.component.ts import { Component, OnInit } from '@angular/core' ; import { KeyValue } from '@angular/common' ; import { Pipe, PipeTransform } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: "./app.component.html" , styleUrls: [ './app.component.css' ] }) export class AppComponent { gfg: any = [ { "3" : "1700" }, { "4" : "1900" }, { "2" : "1400" }, { "1" : "1300" }, { "7" : "1200" }, { "9" : "1800" }, { "8" : "2100" }, { "5" : "1100" } ] display(obj: any) { return Object.values(obj) } } |
Javascript
// app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { HttpClientModule } from '@angular/common/http' ; import { AppComponent } from './app.component' ; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Output:
Contact Us