HDTuto.com

Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7



Hi

In this quick example, let's see angular 9/8/7 keyvalue pipe code. it's simple example of ngfor key value pipe angular example. you'll learn angular 9 ngfor key value. I’m going to show you about angular keyvalue pipe example.

In this tutorial i will provide you full example and how to use angular keyvalue pipe with ngfor objrct map array. you can use it in angular 6, angular 7, angular 8 and angular 9 application.

I am not going to explain more and more description but i will simply give you syntax and some small examples so you can easily use it in your application.

Syntax:

{{ input_expression | keyvalue [ : compareFn ] }}

Example

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

@Component({

selector: 'my-app',

template: `<div>

<div *ngFor="let item of myObject | keyvalue">

{{item.key}}:{{item.value}}

</div>

<div *ngFor="let item of myMapArray | keyvalue">

{{item.key}}:{{item.value}}

</div>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myObject: {[key: number]: string} = {3: 'Hardik', 2: 'Paresh'};

myMapArray = new Map([[3, 'Hardik'], [2, 'Paresh']]);

}

Output

2:Paresh

3:Hardik

2:Paresh

3:Hardik

I hope it can help you...




April 26, 2020 | Category : Angular



Blog Search


Copyright © 2020 HDTuto.com. All rights reserved.