File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
div[top-banner-main] |
| styleUrls |
./top-banner-main.component.scss |
| templateUrl |
./top-banner-main.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Methods
|
actOnResize
|
actOnResize()
|
|
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
|
|
Private
componentId
|
Default value : this.idGenerator.getId()
|
|
|
|
desktopImageBreakpoint
|
Type : string
|
|
|
import { Component, Input, OnInit, ChangeDetectionStrategy, Inject, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { DOCUMENT } from '@angular/common';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { TopBannerData } from 'src/app/core/interfaces/interfaces.component';
import { TopBannerService } from '../top-banner.service';
@Component({
selector: 'div[top-banner-main]',
templateUrl: './top-banner-main.component.html',
styleUrls: ['./top-banner-main.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class TopBannerMainComponent implements OnInit, OnDestroy {
@Input() entity;
data: TopBannerData;
desktopImageBreakpoint: string;
private componentId = this.idGenerator.getId();
constructor(
private constants: ConstantsService,
private changeDetector: ChangeDetectorRef,
private resizer: ResizeContentService,
private idGenerator: IdGeneratorService,
private topBannerService: TopBannerService,
@Inject(DOCUMENT) private document) { }
ngOnInit() {
this.data = this.topBannerService.parseJson(this.entity);
this.desktopImageBreakpoint = `(min-width: ${this.constants.BOOTSTRAP_BREAKPOINTS.MD}px)`;
this.resizer.registerCallback(this.componentId, () => this.actOnResize());
}
ngOnDestroy(): void {
this.resizer.destroyCallback(this.componentId);
}
actOnResize(): void {
const currentWidth = window.innerWidth || this.document.documentElement.clientWidth;
this.data.imageAlt = this.topBannerService.getImageMetaData('alt', currentWidth, this.entity);
this.data.imageTitle = this.topBannerService.getImageMetaData('title', currentWidth, this.entity);
this.changeDetector.detectChanges();
}
}
<ng-container *ngIf="data">
<picture>
<source [media]="desktopImageBreakpoint" [srcset]="data.bannerImageUrl" *ngIf="data.bannerImageUrl">
<source media="(min-width: 0px)" [srcset]="data.mobileBannerImageUrl" *ngIf="data.mobileBannerImageUrl">
<img [title]="data.imageTitle" [src]="data.bannerImageUrl" [alt]="data.imageAlt" *ngIf="data.bannerImageUrl">
</picture>
<div breadcrumb [themeColor]="'light'" *ngIf="data.includeBreadcrumb"></div>
<div class="container">
<div class="row content-box">
<div class="col-md-12 intro">
<div class="introduction">
<div page-detail-header [entity]="entity.PageDetailsData" *ngIf="entity?.PageDetailsData"></div>
<div class="intro-text" *ngIf="data.introduction">
{{data.introduction}}
</div>
</div>
</div>
</div>
</div>
</ng-container>
@import "src/app/styles/helpers";
:host {
position: relative;
min-height: calc-rem(470);
img {
position: absolute;
object-fit: cover;
height: 100%;
min-width: 100%;
z-index: -1;
}
.row {
@include media-breakpoint-down(sm) {
justify-content: center;
}
}
.intro {
margin-bottom: calc-rem(50);
z-index: 10;
@include media-breakpoint-down(md) {
.introduction {
align-items: center;
}
}
.introduction {
display: flex;
flex-direction: column;
color: white;
@include media-breakpoint-down(lg) {
text-align: center;
}
::ng-deep .title {
@include media-breakpoint-down(lg) {
text-align: center;
}
h1 {
@include font-scale(90, thin);
color: white;
}
}
.intro-text {
@include font-scale(18, light);
color: white;
}
i {
font-family: 'SKF Chevin OT Light';
color: white;
}
}
}
}
Legend
Html element with directive