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(_channel: CHANNEL)
Defined in libs/common/frame/src/frame-parts/header/header.component.ts:16
Parameters :
Name Type Optional
_channel CHANNEL No

Inputs

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

Methods

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

Properties

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

Accessors

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

@Component({
  selector: 'frame-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  standalone: false
})
export class HeaderComponent {
  @Input() title?: string;
  @Input() headerTemplate?: TemplateRef<unknown>;
  @Input() logoSrc?: string;
  @Input() headerLogoLinkUrl?: string;

  isExpert: boolean;

  constructor(@Inject(CHANNEL_TOKEN) private _channel: CHANNEL) {
    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>
        <nx-link *ngIf="logoSrc">
          <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>

        <nx-header-app-title data-testid="nx-header-app-title" *ngIf="isExpert">
          {{ 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%;
}

.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 ""