File

app/dxa/dxa-entity/views/news-items/news-items-main/news-items-main.component.ts

Implements

OnInit

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

Constructor

constructor(util: UtilService, constants: ConstantsService)
Parameters :
Name Type Optional
util UtilService No
constants ConstantsService No

Inputs

entity

HostBindings

attr.role
class

Methods

ngOnInit
ngOnInit()
Returns : void
Public parseJSON
parseJSON(entity)
Parameters :
Name Optional
entity No
Returns : NewsItems

Properties

data
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>

./news-items-main.component.scss

@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
Component
Html element with directive

result-matching ""

    No results matching ""