Skip to content

Instantly share code, notes, and snippets.

@bombadillo
Last active April 11, 2019 07:04
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save bombadillo/b6bfe0386d8483d0c0f1eb81566f2f34 to your computer and use it in GitHub Desktop.
Save bombadillo/b6bfe0386d8483d0c0f1eb81566f2f34 to your computer and use it in GitHub Desktop.
Angular 2 Key Value Pipe
import { Pipe, PipeTransform } from '@angular/core';
/*
* Enables the key/value pair of an item to be
* visible within an ngFor
* Usage:
* value of iteratable | keyValue
* Example:
* <ul>
* <li *ngFor='key of demo | keyValue'>
* Key: {{key.key}}, value: {{key.value}}
* </li>
* </ul>
*/
@Pipe({ name: 'keyValue' })
export class KeyValuePipe implements PipeTransform {
transform(value, args: string[]): any {
let keys = [];
for (let key in value) {
keys.push({ key: key, value: value[key]});
}
return keys;
}
}
@Snap252
Copy link

Snap252 commented Jul 30, 2018

what about type safety ?

transform<T, U extends { [id: string]: T } | { [id: number]: T }>(value: U, args?: any): { key: keyof U, value: U[keyof U] }[] {
	const keys: {key: keyof U, value: U[keyof U]}[] = [];
	  for (const key in value) {
		keys.push({key: key, value: value[key]});
	  }
	return keys;
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment