File
Implements
Metadata
| changeDetection |
ChangeDetectionStrategy.OnPush |
| selector |
div[related-links-light-grey-main] |
| styleUrls |
./related-links-light-grey-main.component.scss |
| templateUrl |
./related-links-light-grey-main.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Methods
|
Public
readJSONData
|
readJSONData()
|
|
|
|
|
|
Public
linkTargets
|
Type : RelatedLink[]
|
|
|
|
Public
readMoreLinkDestination
|
Type : string
|
|
|
|
Public
readMoreLinkTitle
|
Type : string
|
|
|
import { Component, OnInit, Input, ChangeDetectionStrategy, HostBinding, ChangeDetectorRef } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ComponentLinkService } from 'src/app/core/services/component-link-service/component-link.service';
interface RelatedLink {
linkObject: any;
title: string;
description: string;
useDescription: boolean;
}
@Component({
selector: 'div[related-links-light-grey-main]',
templateUrl: './related-links-light-grey-main.component.html',
styleUrls: ['./related-links-light-grey-main.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RelatedLinksLightGreyMainComponent implements OnInit {
@Input() entity;
public icon: string;
public title: string;
public linkTargets: RelatedLink[];
public readMoreLinkTitle: string;
public readMoreLinkDestination: string;
@HostBinding('class') get class() { return 'col-md-4 space-between'; }
constructor(
private util: UtilService,
private linkService: ComponentLinkService,
private changeDetector: ChangeDetectorRef ) { }
ngOnInit() {
this.readJSONData();
}
public readJSONData() {
this.icon = this.util.extract(this.entity, 'Icon') || '';
this.title = this.util.extract(this.entity, 'Title') || '';
this.linkTargets = (this.util.extract(this.entity, 'LinkTargets') || []).map(link => this.linkService.parseLink(link));
}
}
<div class="releated-links">
<div class="content">
<div class="link-header">
{{title}}
</div>
<div *ngFor="let link of linkTargets">
<a component-link [linkObject]="link.linkObject">
<i *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/pdf' " class="icon-related-pdf"></i>
<i *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/zip' " class="icon-link-download"></i>
{{link.title}}
<span *ngIf="link.linkObject?.LinkModelTarget?.MimeType === 'application/pdf'">{{link.fileSize}}</span>
</a>
<p *ngIf="link.useDescription">
{{link.description}}
</p>
</div>
</div>
</div>
@import "src/app/styles/helpers";
.releated-links {
display: flex;
.content {
background: $off-white;
padding: calc-rem(45) calc-rem(40) calc-rem(67.5) calc-rem(40);
width: 100%;
.link-header {
padding-bottom: calc-rem(20);
color: $cool-grey;
font-family: 'SKF Chevin OT Light';
line-height: 1.38;
}
.link-list{
a {
font-family: 'SKF Chevin OT Light';
color: $dark-blue;
line-height: 1.85;
}
}
}
}
Legend
Html element with directive