Accessing the first element of an array using an async channel in Angular 2

Question

How to access the first element of an array when using an async channel?

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

I tried (pageTabs$ | async)[0], but it did not work.

Answer 1

Found an even simpler way to do this (without creating a custom channel): 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

You need to create a custom channel that will take the first element from the array, (pageTabs$ | async)not an array.

Answer 3

getter :

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

:

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

nav-tabs:

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