src/app/components/content-page/content-page.component.ts
Content Page Component
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | cns-content-page |
| imports |
HraCommonModule
RouterExtModule
ButtonsModule
ContentTemplateOutletDirective
MarkdownComponent
MatIconModule
PageSectionComponent
TableOfContentsLayoutModule
NavigationModule
FooterComponent
|
| templateUrl | ./content-page.component.html |
| styleUrl | ./content-page.component.scss |
Properties |
|
Inputs |
| data | |
Type : ContentPageData
|
|
| Required : true | |
|
input data for content page |
|
| Protected Readonly content |
Type : unknown
|
Default value : computed(() => coerceArray(this.data().content))
|
|
content data |
| Protected Readonly headerContent |
Type : unknown
|
Default value : computed(() => coerceArray(this.data().headerContent ?? []))
|
|
header content data |
import { coerceArray } from '@angular/cdk/coercion';
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { ContentTemplateOutletDirective } from '@hra-ui/cdk/content-template';
import { HraCommonModule } from '@hra-ui/common';
import { RouterExtModule } from '@hra-ui/common/router-ext';
import { ButtonsModule } from '@hra-ui/design-system/buttons';
import { ContentPageData } from '@hra-ui/design-system/content-templates/content-page';
import { MarkdownComponent } from '@hra-ui/design-system/content-templates/markdown';
import { PageSectionComponent } from '@hra-ui/design-system/content-templates/page-section';
import { TableOfContentsLayoutModule } from '@hra-ui/design-system/layouts/table-of-contents';
import { NavigationModule } from '@hra-ui/design-system/navigation';
import { FooterComponent } from '../footer/footer.component';
/**
* Content Page Component
*/
@Component({
selector: 'cns-content-page',
imports: [
HraCommonModule,
RouterExtModule,
ButtonsModule,
ContentTemplateOutletDirective,
MarkdownComponent,
MatIconModule,
PageSectionComponent,
TableOfContentsLayoutModule,
NavigationModule,
FooterComponent,
],
templateUrl: './content-page.component.html',
styleUrl: './content-page.component.scss',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ContentPageComponent {
/** input data for content page */
readonly data = input.required<ContentPageData>();
/** header content data */
protected readonly headerContent = computed(() => coerceArray(this.data().headerContent ?? []));
/** content data */
protected readonly content = computed(() => coerceArray(this.data().content));
}
<hra-table-of-contents-layout>
<hra-table-of-contents-layout-header>
<hra-page-section [tagline]="data().title" [icons]="data().icons" [breadcrumbs]="data().breadcrumbs">
<hra-markdown class="subtitle" [data]="data().subtitle" />
@if (data().action; as action) {
<a mat-button hraCtaButton hraPrimaryButton class="action" [hraLink]="action.url">
{{ action.label }}
<mat-icon iconPositionEnd>arrow_right_alt</mat-icon>
</a>
}
@for (item of headerContent(); track $index) {
<ng-container *hraContentTemplateOutlet="item" />
}
</hra-page-section>
</hra-table-of-contents-layout-header>
@for (item of content(); track $index) {
<ng-container *hraContentTemplateOutlet="item" />
}
</hra-table-of-contents-layout>
<cns-footer />