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