|
headerLogoLinkUrl
|
Type : string
|
|
|
|
headerTemplate
|
Type : TemplateRef<unknown>
|
|
|
Accessors
|
headerTemplateContext
|
getheaderTemplateContext()
|
|
|
import { CHANNEL, CHANNEL_TOKEN, IS_A1, NO_MARGIN } from '@allianz/taly-core';
import { ChangeDetectionStrategy, Component, TemplateRef, inject, input } from '@angular/core';
import * as windowUtils from '../../utils/window-utils';
@Component({
selector: 'frame-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
standalone: false,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeaderComponent {
private _channel = inject<CHANNEL>(CHANNEL_TOKEN);
protected hasMargin = !inject(NO_MARGIN);
protected isA1 = inject(IS_A1);
readonly title = input<string>();
readonly headerTemplate = input<TemplateRef<unknown>>();
readonly logoSrc = input<string>();
readonly headerLogoLinkUrl = input<string>();
isExpert: boolean;
constructor() {
this.isExpert = this._channel === CHANNEL.EXPERT;
}
get headerTemplateContext() {
return {
title: this.title(),
channel: this._channel,
logoSrc: this.logoSrc()
};
}
reload() {
windowUtils.reload();
}
}
<ng-container
*ngTemplateOutlet="
headerTemplate() || defaultHeaderTemplate;
context: { $implicit: headerTemplateContext }
"
></ng-container>
<ng-template #defaultHeaderTemplate>
<header
nx-header
[ngClass]="{
'header-retail': !isA1 && !isExpert,
'header-a1': isA1
}"
[class.has-margin]="hasMargin"
*aclTag="'taly-frame-header'"
data-testid="header"
>
<div class="header-content">
<nx-header-brand>
@if (logoSrc()) {
<nx-link>
<a
[attr.href]="headerLogoLinkUrl() || null"
(click)="headerLogoLinkUrl() ? null : reload()"
i18n-aria-label="@@frame.header.home-link.label"
aria-label="Go to Homepage"
data-testid="logo-link"
>
<figure>
<img
data-testid="logo"
height="32"
[src]="logoSrc() ?? '' | talyNormalizeUrl"
i18n-alt="@@frame.header.brand-logo.alt"
alt="Allianz Global Brand Logo"
class="logo-image"
/>
</figure>
</a>
</nx-link>
} @if (isExpert || isA1) {
<nx-header-app-title data-testid="nx-header-app-title">
{{ title() }}
</nx-header-app-title>
}
</nx-header-brand>
<nx-header-actions data-testid="nx-header-actions" class="header-action">
<ng-content></ng-content>
</nx-header-actions>
</div>
</header>
</ng-template>
:host {
display: block;
width: 100%;
}
:host-context(.is-stacked:not(.is-a1)) header.has-margin {
max-width: 100%;
width: var(--grid-max-width);
margin-left: auto;
margin-right: auto;
}
.header-retail {
height: 80px !important;
}
.header-content {
width: 100%;
margin: auto;
// This mimics how ndbx header container (parent of .header-content) displays its children
display: flex;
justify-content: space-between;
align-items: center;
}
:host-context(.is-a1) header.has-margin .header-content {
max-width: 100%;
width: var(--grid-max-width);
}
.logo-image {
display: block;
}
Legend
Html element with directive