Windows event log consuming too much time while fetch and display the data

Question

I am trying to fetch and display the windows event log in to the table. It takes almost 7 sec to fetch and display it on client side windows log entries are of more than 150000 and it increase with time. I need to show the data in table using pagination. I need help regarding pagination using angular 2 to show the data and other help regarding time to display the logs because logs generate real time without knowing how it occurs. and where i implement the pagination concept client side or server side.

Api Controller

[HttpGet]
public IEnumerable<Eventlogg> Get()
{
 EventLog eventLog = new EventLog("Application", "nb-ahja1", "EventLoggingApp");

            var model = new List<Eventlogg>();
            foreach (EventLogEntry log in eventLog.Entries)
            { 
                var demo = new Eventlogg();
                demo.Source = log.Source;
                demo.Id = log.EventID;
                demo.Level = log.EntryType.ToString();
                demo.Date = log.TimeGenerated;
                demo.Category = log.Category;
                model.Add(demo);
            }
            return model.OrderByDescending(x => x.Date).ToList();
        }

Angular 2 web api calling

import {Component} from 'angular2/core';
import {EventLogModel} from '../models/eventlogmodel';
import {Http, HTTP_PROVIDERS, Response} from 'angular2/http';
import 'rxjs/Rx';
@Component({
    template: `
<table class="table table-hover" id="myTable">
            <tr>
                <td class="col-md-3"><b>Level</b></td>
                <td class="col-md-3"><b>Date</b></td>
                <td class="col-md-3"><b>Source</b></td>
                <td class="col-md-3"><b>Id</b></td>
                <td class="col-md-3"><b>Category</b></td>
            </tr>

            <tr *ngFor="let model of models">
                <td class="col-md-3">{{model.level}}</td>
                <td class="col-md-3">{{model.date}}</td>
                <td class="col-md-3">{{model.source}}</td>
                <td class="col-md-3">{{model.id}}</td>
                <td class="col-md-3">{{model.category}}</td>
            </tr>
        </table>
`
})

export class BootstrapJavascriptComponent {

    models: Array<EventLogModel> = [];

    constructor(public http: Http) {
        this.getData();
    }
    //api calling from server
    getData() {
        this.http.get('http://localhost:54363/api/data')
            .map(res => (<Response>res).json())
            .map((models: Array<any>) => {
                let result: Array<EventLogModel> = [];
                if (models) {
                    models.forEach(model => {
                        result.push(
                            new EventLogModel(
                                model.id,
                                model.source,
                                model.level,
                                model.category,
                                new Date(model.date)
                                ));
                    });
                }

                return result;
            }).
            subscribe(
            data => {
                this.models = data;
                console.log(this.models);
            },
            err => console.log(err)
            );
    }
}

Model

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace PocDashboard.Models
{
    public class Eventlogg
    {
        public string Source { get; set; }
        public int Id { get; set; }
        public string Level { get; set; }
        public DateTime Date { get; set; }
        public string Category { get; set; }
    }
}

Answer 1

where i implement the pagination concept client side or server side

Server side pagination is better for:

1. Large data set
2. Faster initial page load
3. Accessibility for those not running JavaScript
4. Complex view business logic
5. Resilience to concurrent changes

Client side pagination is better for:

1. Small data set
2. Faster subsequent page loads
3. Sort & filter requirements supported fully (unless results greater than max size).

How to do paging in AngularJS?