TALY - The Allianz Library
  1. Components
  2. HeaderComponent

File

libs/common/frame/src/frame-parts/header/header.component.ts

Metadata

selector frame-header
styleUrls ./header.component.scss
templateUrl ./header.component.html

Index

Properties
Methods
Inputs
Accessors

Constructor

constructor()
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:18

Inputs

headerLogoLinkUrl
Type : string
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:16
headerTemplate
Type : TemplateRef<>
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:14
logoSrc
Type : string
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:15
title
Type : string
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:13

Methods

reload
reload()
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:32
Returns : void

Properties

isExpert
Type : boolean
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:18

Accessors

headerTemplateContext
getheaderTemplateContext()
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:24
 
import { CHANNEL, CHANNEL_TOKEN } from '@allianz/taly-core';
import { Component, Input, TemplateRef, inject } from '@angular/core';

@Component({
  selector: 'frame-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  standalone: false
})
export class HeaderComponent {
  private _channel = inject<CHANNEL>(CHANNEL_TOKEN);

  @Input() title?: string;
  @Input() headerTemplate?: TemplateRef<unknown>;
  @Input() logoSrc?: string;
  @Input() headerLogoLinkUrl?: string;

  isExpert: boolean;

  constructor() {
    this.isExpert = this._channel === CHANNEL.EXPERT;
  }

  get headerTemplateContext() {
    return {
      title: this.title,
      channel: this._channel,
      logoSrc: this.logoSrc
    };
  }

  reload() {
    window.location.reload();
  }
}

<ng-container
  *ngTemplateOutlet="
    headerTemplate || defaultHeaderTemplate;
    context: { $implicit: headerTemplateContext }
  "
></ng-container>

<ng-template #defaultHeaderTemplate>
  <header
    nx-header
    [ngClass]="{ 'header-retail': !isExpert }"
    *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) {
        <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>

./header.component.scss 

:host {
  display: block;
  width: 100%;
}

:host-context(.is-stacked) header {
  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;
}

.logo-image {
  display: block;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""