src/app/modules/header/header.component.ts
Page header
| changeDetection | ChangeDetectionStrategy.OnPush |
| selector | ccf-header |
| styleUrls | ./header.component.scss |
| templateUrl | ./header.component.html |
Properties |
|
Inputs |
HostBindings |
constructor(page: PageState)
|
||||||||
|
Creates an instance of header component.
Parameters :
|
| homeUrl | |
Type : string
|
|
| logoTooltip | |
Type : string
|
|
| class |
Type : "ccf-header"
|
Default value : 'ccf-header'
|
|
HTML class name |
| Readonly clsName |
Type : string
|
Default value : 'ccf-header'
|
Decorators :
@HostBinding('class')
|
|
HTML class name |
import { ChangeDetectionStrategy, Component, HostBinding, Input } from '@angular/core';
import { PageState } from '../../core/store/page/page.state';
/**
* Page header
*/
@Component({
selector: 'ccf-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HeaderComponent {
/** HTML class name */
@HostBinding('class') readonly clsName = 'ccf-header';
@Input() homeUrl!: string;
@Input() logoTooltip!: string;
/**
* Creates an instance of header component.
*
* @param page Page data.
*/
constructor(readonly page: PageState) {}
}
<ng-container *ngIf="page.useCancelRegistrationCallback$ | async; then backButton; else logo"> </ng-container>
<ng-template #backButton>
<div class="link home" (click)="page.cancelRegistration()" rel="noreferrer noopener">
<mat-icon class="icon backbutton">chevron_left</mat-icon>
<span class="text">BACK</span>
</div>
</ng-template>
<ng-template #logo>
<a
class="link portal"
[href]="homeUrl"
rel="noreferrer noopener"
[matTooltip]="logoTooltip"
matTooltipPosition="right"
>
<div class="logo" aria-hidden="false" aria-label="Reset tool"></div>
</a>
</ng-template>
<div class="filler"></div>
./header.component.scss
:host {
display: flex;
align-items: center;
min-height: 4rem;
padding: 0 1.5rem;
border-bottom-width: 1px;
border-bottom-style: solid;
.text {
padding: 0.25rem 0;
height: 2rem;
display: flex;
align-items: center;
font-weight: lighter;
font-size: 1.5rem;
}
.link {
display: flex;
align-items: center;
cursor: pointer;
text-decoration: none;
padding: 0.25rem 0;
}
.home {
* {
transition: color 0.6s;
}
.backbutton {
// Material icons do not always fill the space given
// Scale up size for icon to look correct
font-size: 2.25rem;
width: 2.25rem;
height: 2.25rem;
}
}
.portal {
height: 100%;
width: 25rem;
align-items: center;
display: flex;
}
.logo {
width: 100%;
height: 50%;
background-repeat: no-repeat;
background-size: contain;
}
.filler {
flex-grow: 1;
margin: 0;
}
}