Access first item of array using async pipe in Angular 2

Question

How to access the first item of an array when using async pipe?

<nav-tabs
   [tabs]="(pageTabs$ | async)"
   [activeTab]="(pageTabs$ | async)[0]">
</nav-tabs>

I've tried (pageTabs$ | async)[0] but it didn't work.

Actually, this is how it is done. But actually, this smells, because pageTabs$ is subscribed twice. — Estus Flask
– Estus Flask, Commented Mar 5, 2017 at 21:36

AndreFeijo · Accepted Answer · 2017-03-05 21:59:32Z

11

Found an even easier way of doing it (without creating a custom pipe): add a map to the observable.

component.ts

this.activeTab$ = this.pageTabs$.map(x => x[0]);

component.html

<nav-tabs
   [tabs]="(pageTabs$ | async)"
   [activeTab]="(activeTab$ | async)">
</nav-tabs>

answered Mar 5, 2017 at 21:50

AndreFeijo

10.7k7 gold badges39 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Victor Godoy · Accepted Answer · 2018-09-23 19:12:31Z

2

A simpler way it's to assign it to a template value with the as statement

<nav-tabs
   [tabs]="(pageTabs$ | async as pageTabs)"
   [activeTab]="pageTabs[0]">
</nav-tabs>

answered Sep 23, 2018 at 19:12

Victor Godoy

1,69216 silver badges19 bronze badges

cyr_x · Accepted Answer · 2017-03-05 22:11:39Z

1

I would just write a new getter in your components code:

 public get activeTab$() {
   return this.pageTabs$.map(tabs => Array.isArray(tabs)? tabs[0]: null;
 }

and then use it:

 [active-tab]="activeTab$ | async"

Or you can do it in your nav-tabs component:

 public get activeTab() {
    return Array.isArray(this.tabs)? tabs[0]: null;
 }

answered Mar 5, 2017 at 22:11

cyr_x

14.3k2 gold badges35 silver badges48 bronze badges

kemsky · Accepted Answer · 2017-03-05 21:30:59Z

0

You have to create custom pipe which will take first item from array, (pageTabs$ | async) is not an array.

answered Mar 5, 2017 at 21:30

kemsky

15.4k3 gold badges36 silver badges53 bronze badges