access key and value of object using *ngFor

by

As in latest release of Angular (v6.1.0) , Angular Team has added new built in pipe for the same named as keyvalue pipe to help you iterate through objects, maps, and arrays, in the common module of angular package.
For example –

<div *ngFor="let item of testObject | keyvalue">
    Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>

To keep original order, use keyvalue:onCompare,
and in component define callback:

// ...
import {KeyValue} from '@angular/common';

@Component(/* ... */)
export class MyComponent {
  private onCompare(_left: KeyValue<any, any>, _right: KeyValue<any, any>): number {
    return -1;
  }
}

Working Forked Example

check it out here for more useful information –

If you are using Angular v5 or below or you want to achieve using pipe follow this answer

More Related Contents:

  1. How to iterate object keys using *ngFor?
  2. Read response headers from API response – Angular 5 + TypeScript
  3. Angular error: “Can’t bind to ‘ngModel’ since it isn’t a known property of ‘input'”
  4. How to dynamically add a directive?
  5. How to get query parameters from URL in Angular 5?
  6. angular 2 sort and filter
  7. In Angular, What is ‘pathmatch: full’ and what effect does it have?
  8. Angular2 – FormControl Validation on blur
  9. How to inject service into class (not component)
  10. Angular4 Exception: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘input’
  11. No provider for AngularFireDatabase, AngularFireAuth
  12. Multiple canActivate guards all run when first fails
  13. TS2531: Object is possibly ‘null’
  14. Custom ExceptionHandler change detection lag
  15. Trigger update of component view from service – No Provider for ChangeDetectorRef
  16. TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable
  17. Pass parameter into route guard
  18. Type casting within a template in Angular 2
  19. Typescript dependency injection public vs private
  20. Rxjs Retry with Delay function
  21. What is the meaning of question mark in expressions in Angular 2?
  22. Merging http observables using forkjoin
  23. Subscribing to a nested Observable
  24. Angular: selected on option of select doesn’t work as excepted while using along with ngModel
  25. How to Using a FormArray in a FormGroup
  26. Class is using Angular features but is not decorated. Please add an explicit Angular decorator
  27. How to validate white spaces/empty spaces? [Angular 2]
  28. Call a function every 10 seconds Angular2
  29. How to change angular material datepicker format
  30. Angular2 Error: There is no directive with “exportAs” set to “ngForm”

Leave a Comment