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.

Answer 1

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>

Answer 2

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;
 }