<div style=" overflow-y: auto;

[height]="400"

[data]="data"

containerClass="k-d-flex k-flex-col k-flex-nowrap"

(scrollBottom)="loadMore()"

<ng-template kendoListViewHeaderTemplate>

let-dataItem="dataItem"

let-isLast="isLast"

<div *ngFor="let item of dataItem?.changes | keyvalue">

<div *ngIf="!historyExtraParams.includes(item.key)">

{{isLast}} An event called {{dataItem?.event}} happened and {{getFormattedField(item.key)}} changed from {{item.value[0] || 0}} to {{item.value[1]}},

</div>

import { Component, Input, OnInit, EventEmitter, Output } from '@angular/core';

import { ZonesService } from '../../services/zones.service';

import {PagerSettings,

PagerPosition,

PagerType,PageChangeEvent} from "@progress/kendo-angular-listview";

import { historyExtraParams } from '../../constants/entities.constant';

@Component({

selector: 'app-list-view',

templateUrl: './list-view.component.html',

styleUrls: ['./list-view.component.scss']

})

export class ListViewComponent implements OnInit {

@Input() dataId;

@Output() closeDialog: EventEmitter<boolean> = new EventEmitter();

public data: any[] = [];

public historyExtraParams = historyExtraParams;

public updatedData;

public page = 0;

constructor(private _zonesService: ZonesService) { }

public ngOnInit() {

this.loadMore();

}

public getData(): any {

this._zonesService.getZonesd(this.dataId, this.page).subscribe(

response => {

this.data = response['version_histories'];

},

error => {

if (error && error.status === 401) {

}

});

}

public getFormattedField(title) {

return title ? title.replace(/_/g, ' ') : '';

}

public loadMore() {

this.page = this.page + 1;

this.getData();

}

public closeConfirmDialog() {

this.closeDialog.emit();

}

}