DEV Community

Magdalena Chmura
Magdalena Chmura

Posted on

Angular KeyValue Pipe 🚀

KeyValue pipe is an Angular built-in feature that transforms objects or maps into an array of key-value pairs.

If you've been working with Angular since its early versions, you might have missed it as the KeyValue pipe was introduced in Angular 6.1.

Let's see it in action 🔥

Imagine a simple object that stores student's names as a key and an array of grades as a value.

  const students = {
    Susane: [4, 3, 2, 1, 5],
    Jenifer: [3, 5, 2, 2],
    John: [5, 3, 3, 4, 1]
Enter fullscreen mode Exit fullscreen mode

With KeyValuePipe you can iterate over objects directly from the template.

<ul *ngFor="let student of (students | keyvalue)">
  <li>{{ student.key }}'s grades: {{ student.value }}</li> 
Enter fullscreen mode Exit fullscreen mode

It is a clean and declarative solution that will allow you to clean up your templates.

Hope you're having a great one, and I'll see you for more 60 Seconds of Angular posts in the future 🥳

Top comments (3)

lawcia profile image

Useful thanks!

sinsunsan profile image
Sébastien LUCAS

Nice tutorial, I like to store data in an object which allow for example to group a list. But an object is not easily iterable in an angular template. This pipe make this easy.

joellau profile image
Joel Lau

great read!