File
Implements
Metadata
changeDetection |
ChangeDetectionStrategy.OnPush |
selector |
article[news-items-main] |
styleUrls |
./news-items-main.component.scss |
templateUrl |
./news-items-main.component.html |
Index
Properties
|
|
Methods
|
|
Inputs
|
|
HostBindings
|
|
Methods
Public
parseJSON
|
parseJSON(entity)
|
|
|
import { OnInit, Component, Input, ChangeDetectionStrategy, HostBinding } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
interface NewsItems {
title: string;
news_date: Date;
time_zone: any;
ingress: string;
news_text: string;
press_contacts: string;
company_info: string;
imageUrl: string;
imageAlt: string;
}
@Component ({
selector: 'article[news-items-main]',
templateUrl: './news-items-main.component.html',
styleUrls: ['./news-items-main.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NewsItemsMainComponent implements OnInit {
@Input() entity;
data;
@HostBinding('class') get class() { return 'col-md-8 space-between'; }
@HostBinding('attr.role') get role() { return 'article'; }
constructor(
private util: UtilService,
private constants: ConstantsService
) {}
ngOnInit() {
const tz = this.util.extract(this.entity, 'Timezone') || '';
this.data = this.parseJSON(this.entity);
}
public parseJSON(entity): NewsItems {
const tz = this.util.extract(entity, 'Timezone') || '';
const title = this.util.extract(entity, 'Title') || '';
const news_date = this.util.extract(entity, 'Newsdate') || '';
const time_zone = this.constants.getTimezone(tz);
const ingress = this.util.extract(entity, 'Ingress') || '';
const news_text = this.util.extract(entity, 'Newstext') || '';
const press_contacts = this.util.extract(entity, 'Presscontacts') || '';
const company_info = this.util.extract(entity, 'Companyinfo') || '';
const imageUrl = this.util.extract(entity, 'Image', [0], 'Image', 'Url') || '';
const imageAlt = this.util.extract(entity, 'Image', [0], 'Image', 'Assetmetadata', 'Cmsdescription') || '';
const parsed = {
title: title,
news_date: news_date,
time_zone: time_zone,
ingress: ingress,
news_text: news_text,
press_contacts: press_contacts,
company_info: company_info,
imageUrl: imageUrl,
imageAlt: imageAlt
};
return parsed;
}
}
<ng-container *ngIf="data">
<div class="image-container" *ngIf="data.imageUrl">
<img [src]="data.imageUrl" [alt]="data.imageAlt">
</div>
<div class="news-body">
<h2>{{data.title}}</h2>
<div class="date mb-4">
<div class="mr-2">{{data.news_date | date: 'yyyy MMMM dd, HH:mm' }}</div>
<div>{{data.time_zone}}</div>
</div>
<rich-text-field [body]="data.ingress"></rich-text-field>
<rich-text-field [body]="data.news_text"></rich-text-field>
<rich-text-field [body]="data.press_contacts"></rich-text-field>
<rich-text-field [body]="data.company_info"></rich-text-field>
</div>
</ng-container>
@import "src/app/styles/helpers";
:host {
display: flex;
flex-direction: column;
.image-container {
margin-bottom: calc-rem(20);
img {
width: 100%;
}
}
.news-body {
display: flex;
flex-direction: column;
h2 {
line-height: 1.38;
}
.date {
display: flex;
flex-direction: row;
line-height: 1.5;
color: $cool-grey;
}
}
}
Legend
Html element with directive