File
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
cx-footer-navigation |
| templateUrl |
./footer-navigation.component.html |
|
styleClass$
|
Type : Observable<string>
|
Default value : this.componentData.data$.pipe(
map((d) => d?.styleClass)
)
|
|
|
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { CmsNavigationComponent } from '@spartacus/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
import { NavigationNode } from '../navigation/navigation-node.model';
import { NavigationService } from '../navigation/navigation.service';
@Component({
selector: 'cx-footer-navigation',
templateUrl: './footer-navigation.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FooterNavigationComponent {
node$: Observable<NavigationNode> = this.service.getNavigationNode(
this.componentData.data$
);
styleClass$: Observable<string> = this.componentData.data$.pipe(
map((d) => d?.styleClass)
);
constructor(
protected componentData: CmsComponentData<CmsNavigationComponent>,
protected service: NavigationService
) {}
}
<cx-navigation-ui
[node]="node$ | async"
[flyout]="false"
[ngClass]="styleClass$ | async"
></cx-navigation-ui>
Legend
Html element with directive