Encontré una forma aún más fácil de hacerlo (sin crear una tubería personalizada): agregue un mapa al observable.

componente.ts

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

componente.html

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

Una forma más sencilla es asignarlo a un valor de plantilla con la instrucción as

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

Simplemente escribiría un nuevo captador en el código de sus componentes:

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

y luego usarlo:

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

O puede hacerlo en su componente de pestañas de navegación:

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