CODEWITHSUNDEEP
javascriptangulartypescriptangular9
sridharan
sridharan

Reputation: 2065

Angular 9 - The pipe 'keyvalue' could not be found

The pipe 'keyvalue' could not be found. in angular 9

"@angular/animations": "^9.0.1",
    "@angular/common": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/forms": "~9.0.1",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",

 <div *ngFor="let item of faqData | keyvalue; let i=index">
            {{item.key}}:{{item.value}}
          </div>
          <p>Map</p>
          <div *ngFor="let item of map | keyvalue">
            {{item.key}}:{{item.value}}
          </div>

 faqData = { id: 1, name: "Abdul Rafay" };
  object: {[key: number]: string} = {2: 'foo', 1: 'bar'};
  map = new Map([[2, 'foo'], [1, 'bar']]);

Upvotes: 3

Views: 3318

Answers (2)

Roshanak
Roshanak

Reputation: 1

Maybe you forget to import that in import section of @component({}) at .ts file .

imports: [KeyValuePipe]

Upvotes: 0

Sajeetharan
Sajeetharan

Reputation: 222592

It works fine with Angular9 and it should work fine with all versions of app using angular 6+.

However if you also can try the alternate way.

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

and then in TS

 get key(){
    return Object.keys(this.faqData );
 }

FIX: OP found that he was missing CommonModule under the imports

Upvotes: 1

Related Questions