CODEWITHSUNDEEP
angularangular-pipe
Abdul Rafay
Abdul Rafay

Reputation: 3391

Angular - The pipe 'keyvalue' could not be found

I'm testing Angular's keyvalue pipe with simple code:

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

@Component({
  selector: 'app-root',
  template: `<div *ngFor="let prop of testObj | keyvalue">
      <div>key: {{prop.key}}</div>
      <div>value: {{prop.value}}<div>
    </div> `
})
export class AppComponent {
  testObj = { id: 1, name: "Abdul Rafay" }
}

but it's giving me this error:

Template parse errors: The pipe 'keyvalue' could not be found ("]prop of testObj | keyvalue"> key: {{prop.key}} value: {{prop.value}}"): ng:///AppModule/AppComponent.html@0:17 Evaluating src/main.ts Booting application

am i missing anything? Here's my Stackblitz

Upvotes: 12

Views: 17001

Answers (3)

user6781
user6781

Reputation: 303

Angular 16: In my case I had to add import { KeyValuePipe } from '@angular/common';

Upvotes: 1

Chellappan வ
Chellappan வ

Reputation: 27371

The KeyValue Pipe is available in angular 6.1 to Update your dependencies it will work

If you are using angular 6 you can try this

HTML

  <div *ngFor="let prop of key">
          <div>key: {{prop}}</div>
          <div>value: {{testObj[prop]}}<div>
        </div>

TS

 testObj = { id: 1, name: "Abdul Rafay" }
    get key(){
      return Object.keys(this.testObj);
    }

Example: https://stackblitz.com/edit/angular-6-template-x9hady

Upvotes: 6

Developer
Developer

Reputation: 169

Your code is fine. You just need to update your dependencies to 6.1 to use keyvalue pipe.

Stackblitz here

Upvotes: 12

Related Questions