Fixed Angular Material and Karma Error

If you are having trouble with Unknown ‘Angular Material Module’ element in your Angular Unit Test.
This could be the fix.

Add the Angular Material Module to the imports in beforeEach.

import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatSidenavModule, MatCardModule } from '@angular/material';
import { DayscheduleComponent } from './../dayschedule/dayschedule.component';
import { WeekscheduleComponent  } from './../weekschedule/weekschedule.component';

import * as moment from 'moment';



describe('SchedulesComponent', () => {
  let component: SchedulesComponent;
  let fixture: ComponentFixture<SchedulesComponent>;

  let debugElement: DebugElement;
  let htmlElement: HTMLElement;

  beforeEach(
    async(() => {
      TestBed.configureTestingModule({
        declarations: [SchedulesComponent, DayscheduleComponent, WeekscheduleComponent],
        imports: [ MatSidenavModule, MatCardModule, HttpModule, BrowserModule, BrowserAnimationsModule ]
      }).compileComponents();
    })
  );

Basic Angular UnitTest Template

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { CounterComponent } from './counter.component';
import { By } from '@angular/platform-browser';
describe('CounterComponent', () => {
  let component: CounterComponent;
  let fixture: ComponentFixture<CounterComponent>;
  let debugElement: DebugElement;
  let htmlElement: HTMLElement;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
    declarations: [CounterComponent]
    }).compileComponents();
  }));

  beforeEach(() => {
     fixture = TestBed.createComponent(CounterComponent);
     component = fixture.componentInstance;

     fixture.detectChanges();

     debugElement = fixture.debugElement.query(By.css('p'));
     htmlElement = debugElement.nativeElement;
  });

  it('should increment the counter number by one', () => {
    // Arrange
    const initialValue = component.counter;

    // Act
    component.increment();
    fixture.detectChanges();
    const newValue = component.counter;

    // Assert
    expect(newValue).toBeGreaterThan(initialValue);
  });

  it('should decrement the counter number by one', () => {
    // Arrange
    const initialValue = component.counter;

    // Act
    component.decrement();
    fixture.detectChanges();
    const newValue = component.counter;

    // Assert
    expect(newValue).toBeLessThan(initialValue);
  });

  it('should display the counter number on screen, after being incremented by one', () => {

    component.increment();
    fixture.detectChanges();

    // Assert that the test on screen is of Number: 1
    expect(htmlElement.textContent).toEqual('Number: 2');
  });

  it('should display the counter number on screen, after being decremented by one', () => {

    component.decrement();
    fixture.detectChanges();

    // Assert that the test on screen is of Number: 1
    expect(htmlElement.textContent).toEqual('Number: 0');
  });

  it('should display the current number of the counter', () => {
    // Assert that the test on screenis of Number: 1
    expect(htmlElement.textContent).toEqual('Number: 1');

  });

});

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

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

    constructor(){}

    ngOnInit(){        
        this.inMemoryData =this.data;
        this.showPage(1);
       
    }

    showPage(index){      
        var  d = this.inMemoryData;      
     
        var newd = [];
        for(var i in d){    
            if(d[i].p==parseInt(index)){
              newd.push(d[i]);      
            }
        }        
        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 = this.data;
        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;
               newd.push(d[i]);

               // assign page
               if(itemCounter >= this.totalResultPerPage){
                   itemCounter=1;
                   pageCounter++;

               }else{
                   itemCounter++;
               }
               
          }
        }

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

export class Datum{
    id:number;
    FullName:string;
    Email:string;
    p:number;
}