File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-configurator-tab-bar |
| templateUrl |
./configurator-tab-bar.component.html |
|
isOverviewPage$
|
Type : Observable<boolean>
|
Default value : this.routerData$.pipe(
map(
(routerData) =>
routerData.pageType === ConfiguratorRouter.PageType.OVERVIEW
)
)
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import {
ConfiguratorRouter,
ConfiguratorRouterExtractorService,
} from '@spartacus/product-configurator/common';
import {} from '@spartacus/storefront';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Component({
selector: 'cx-configurator-tab-bar',
templateUrl: './configurator-tab-bar.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ConfiguratorTabBarComponent {
routerData$: Observable<ConfiguratorRouter.Data> =
this.configRouterExtractorService.extractRouterData();
isOverviewPage$: Observable<boolean> = this.routerData$.pipe(
map(
(routerData) =>
routerData.pageType === ConfiguratorRouter.PageType.OVERVIEW
)
);
constructor(
protected configRouterExtractorService: ConfiguratorRouterExtractorService
) {}
}
<ng-container *ngIf="routerData$ | async as routerData">
<ng-container *ngIf="!routerData.displayOnly">
<a
tabindex="0"
[class.active]="!(isOverviewPage$ | async)"
[routerLink]="
{
cxRoute: 'configure' + routerData.owner.configuratorType,
params: {
entityKey: routerData.owner.id,
ownerType: routerData.owner.type
}
} | cxUrl
"
role="link"
>{{ 'configurator.tabBar.configuration' | cxTranslate }}</a
>
<a
tabindex="0"
[class.active]="isOverviewPage$ | async"
[routerLink]="
{
cxRoute: 'configureOverview' + routerData.owner.configuratorType,
params: {
entityKey: routerData.owner.id,
ownerType: routerData.owner.type
}
} | cxUrl
"
role="link"
>{{ 'configurator.tabBar.overview' | cxTranslate }}</a
>
</ng-container>
</ng-container>
Legend
Html element with directive