How to Create DataTable in Angular2 / TypeScript

I am not sure if there are any ported Jquery DataTable available but I’m pretty sure I find a hard time finding it.
So I created my own DataTable implementation in Angular2/TypeScript.

I too busy to explain so just copy and paste this and if you have any problems drop me a comment or email me.

Angular2 restful client. #angular2 #aspnetmvc5 #webapi #entityframework #javascript #webdev #webdesign #sofwareengineering #singlepageapplications

A video posted by Full-Stack .Net Developer (@butchokoiechronicles) on

  selector: 'btc-table',,
    <input type="text" [(ngModel)]="searchString" (keyup)="filterResult($event)" placeHolder="Search" class="form-control" />
  <table class="table table-bordered">
        <tr><th *ngFor="let t of theader">{{t}}</th></tr>
        <tr *ngFor="let d of displayData">
            <td *ngFor="let t of theader">{{d[t]}}</td>        
        <tr><th *ngFor="let t of theader">{{t}}</th></tr>
        <div style="display:inline-block">{{displayStatus}}</div>
        (click)="showPage(ndx + 1)"
        class="btn btn-success"
        *ngFor="let item of totalPages | fill let ndx = index">{{ndx + 1}}</div>
   pipes: [ FillPipe,FilterArrayPipe ]
export class BtcTableComponent {
    theader = ["id","FullName","Email"];  
    totalResultCount:number = 10;
    totalResultPerPage:number = 3;
    data:Datum[] = [
        {id:1,FullName:"Julius Bacosa",Email:"",p:1},
        {id:2,FullName:"Julius Ceasar",Email:"",p:1},
        {id:3,FullName:"Napoleon Bonaparte",Email:"",p:1},
        {id:4,FullName:"Genghis Khan",Email:"",p:2},
        {id:5,FullName:"Joseph Stalin",Email:"",p:2},        
        {id:6,FullName:"Cara Delevingne",Email:"",p:2},
        {id:7,FullName:"Wintson Churchill",Email:"",p:3},
        {id:8,FullName:"Vladimir Putin",Email:"",p:3},
        {id:9,FullName:"Adolf Hitler",Email:"",p:3},
        {id:9,FullName:"Donald Trump",Email:"",p:4},



        var  d = this.inMemoryData;      
        var newd = [];
        for(var i in d){    
        this.totalPages = Math.ceil(this.inMemoryData.length / this.totalResultPerPage);
        this.totalRemaining = this.inMemoryData.length % this.totalResultPerPage;
        this.displayData = newd;
        this.displayStatus = "Showing " + newd.length + " of " + d.length;

    filterResult(event:any) {
        var str = this.searchString;
        var d =;
        var newd = [];
        var itemCounter = 1;
        var pageCounter = 1;                
        for(let i in d){
          if((typeof d[i].FullName === 'string' || d[i] instanceof Datum) && (d[i].FullName.indexOf(str)!==-1)){
               d[i].p = pageCounter;

               // assign page
               if(itemCounter >= this.totalResultPerPage){


        this.inMemoryData = newd;
        this.totalPages = Math.ceil(newd.length / this.totalResultPerPage);
        this.totalRemaining = newd.length % this.totalResultPerPage;

export class Datum{

Loosely Coupled , Test Driven Design and API Centric Application

I now have my MVC WebAPI 2 implemented with Test Driven Design.

Loosely Coupled with the help of Unity and TDDed with Moq.

Now I can begin porting my Real Estate Billing Management System coded in PHP and Zend Framework

public class PeopleRepository<T> : IPeopleRepository<T> where T : class
   protected AppDBContext db;

   public PeopleRepository(IUnitOfWork unitOfWork)
     db = unitOfWork.DbContext;
   public interface IPeopleRepository<T> where T : class
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);
   public interface IPeopleRepository<T> where T : class
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);

I will have this Application front ended with AngularJs2 because of TypeScript.

I heard that ReactJs is becoming more popular. But just *7^&off!

Mastering Inversion of Control (IoC) and Test Driven Design Discipline Concept step-by-step

My Application is going to have 3 type of people entity or maybe more in the future.
For now I have Customers, Agents and Employees. So I created one main Entity which I called Person, and
have these 3 models get inheritance from the Person model.

And to avoid repeating codes on this three entities during implementation, I make use of C#’s Generics,

To illustrate generics in my Unit Testing using Moq. The following codes are for your perusal Kids.! Enjoy!

public class CustomersControllerTest
   Mock<IPersonRepository<Customer>> _repositoryMock;
   CustomersController controller;

   public CustomersControllerTest(Mock<IPersonRepository<Customer>> repositoryMock)
      _repositoryMock = repositoryMock;
   public void SetUp()
      _repositoryMock = new Mock<IPersonRepository<Customer>>();
      controller = new CustomersController(_repositoryMock.Object);            

Unity Dependency Injection, Test Driven Design and Entity Framework

Early Today I struggled on implementing Dependency Injection using Unity on a new MVC 5 setup. I struggle so much that I move on to unit testing instead just to make some progress today using Moq.

So Unit Testing my Project right now is using only the Repository Pattern. I’ll be back on Dependency Injection Containers Maybe next week. I’ll use this Repository Pattern setup to finish my 2 projects this week.

Here are some code highlights

Instantiating your controller

private ICustomerRepository _customerRepository;

public CustomersController(ICustomerRepository customerRepository)
  _customerRepository = customerRepository;

public CustomersController()
  _customerRepository = new CustomerRepository();

Moq Unit Testing

 var customers = new List<Customer>();
 repositoryMock.Setup(x => x.FindAll()).Returns(customers.AsQueryable());

 var result = controller.Lists() as ViewResult;
 var model = result.ViewData.Model as List<Customer>;

 Assert.AreEqual(1, model.Count);
 Assert.AreEqual("Lists", result.ViewName);

Repository Interface for Customers Implementation

public interface ICustomerRepository : IDisposable
  IEnumerable<Customer> FindAll();
  Customer GetByID(int id);      
  void Delete(int id);
  void SaveOrUpdate(Customer customer);

This will now be my base code to implement by Billing and Payroll Applications.


Query for Entity Framework using Concept of Projection for Tuned Performance.

Hi Kids,

You should not filter your entity framework results with-in a loop.

It is better to code it like this.

var object = await db.Tables.Include(o => o.AnotherTable)
.Where(s => s.Created >= startDate && s.Created <= endDate)
.OrderByDescending(lambda =>
.Select(anotherlambda => new TemporaryObject{
                        SelectedColumn = so.SelectedColumn ,

Do I have to tell you everything?