703-675-4978

There are a number of widget approaches to building tables and tabbed layouts. Amongst the best is Angular Material. Basically, you just import the right modules and you pretty much get your whole layout for free. There are some problems though. Generally, they are hard to custom style, and you find yourself fighting against their prescriptive defaults (even when you discover the power of ::ng-deep or changing the view encapsulation to None on your component). However for me the nail in the coffin was that there just doesn’t seem to be a way to do editable form fields in Angular Material Tables, (819) 900-1866.

In this blog, in several parts, we will create a small Angular 5 project from scratch and demonstrate an editable data table with server-side paging and sorting.

Angular 5: Setting Up an Application for Data in a Table
Angular 5: Using Reactive Forms for Data in a Table
Angular 5: Implementing CRUD Actions for Data in a Table
Angular 5: Implementing Sorting for Data in a Table
Angular 5: Implementing Paging for Data in a Table

To start off with we create the Angular 5 project:

ng new table-page-sort-demo

Setting Up The Mock API

To keep things simple, we’ll create a mock API which will pretend to be our backend, just replace this with your real back-end when you’re ready.

Create a new directory called _mockapi and add three files to it as shown:

There are a few concepts involved here, so I’ll go through what each file does.

export class Jedi implements IJedi { 
  name: string; 
  race: string; 
  homeworld: string; 
  status: string; 
  master: string; 
  rank: string;

constructor(obj: Jedi = {} as Jedi) { 
  const { 
    name = '', 
    race = '', 
    homeworld = '', 
    status = '', 
    master = '', 
    rank = '' 
  } = obj;

    this.name = name;
    this.race = race;
    this.homeworld = homeworld;
    this.status = status;
    this.master = master;
    this.rank = rank;
  }
}

export interface IJedi { 
  name: string; 
  race: string; 
  homeworld: string; 
  status: string; 
  master: string; 
  rank: string; 
}

The API and Angular 5 Component code will share a definition of what a Jedi does. The above is a flexible class definition, enabling you to build a Jedi with any number of parameters, one such construction is seen in each “push” line below:

import { Jedi } from './jedi';

export function createTestData(): Jedi[] { 
  const jedi: Jedi[] = []; 
  jedi.push(new Jedi({name: 'Mace Windu', race: 'human', alias: '', homeworld: 'Haruun Kal', status: 'baddass', master: 'Cyslin Myr', rank: 'Jedi Master'})); 
  jedi.push(new Jedi({name: 'Luke Skywalker', race: 'human', alias: '', homeworld: 'Tatooine', status: 'good', master: 'Yoda', rank: 'Jedi Knight'})); 
  jedi.push(new Jedi({name: 'Obi Wan Kenobi', race: 'human', alias: 'Ben Kenobi', homeworld: 'Stewjon', status: 'good', master: 'Qui-Gon Jinn', rank: 'Jedi Master'})); 
  jedi.push(new Jedi({name: 'Yoda', race: 'unknown', alias: '', homeworld: 'unknown', status: 'good', master: 'Garro', rank: 'Jedi Grand Master'})); 
  jedi.push(new Jedi({name: 'Maul', race: 'dathomirian', alias: 'Darth Maul', homeworld: 'Dathomir', status: 'bad', master: 'Darth Sideous', rank: 'Sith Lord'}));
  jedi.push(new Jedi({name: 'Ezra Bridger', race: 'human', alias: '', homeworld: 'Lothal', status: 'good', master: 'Kanan Jarrus', rank: 'Jedi'})); 
  jedi.push(new Jedi({name: 'Kanan Jarrus', race: 'human', alias: '', homeworld: 'Coruscant', status: 'good', master: 'Depa Billaba', rank: 'Jedi'}));
  jedi.push(new Jedi({name: 'Qui-Gon Jinn', race: 'human', alias: '', homeworld: 'Coruscant', status: 'good', master: 'Count Dooku', rank: 'Jedi Master'})); 
  jedi.push(new Jedi({name: 'Count Dooku', race: 'human', alias: 'Darth Tyranus', homeworld: 'Serenno', status: 'rich and bad', master: 'Yoda', rank: 'Jedi Master'})); 
  jedi.push(new Jedi({name: 'Ben Solo', race: 'human', alias: 'Kylo Ren', homeworld: 'Chandrilla', status: 'confused', master: 'Luke Skywalker', rank: 'Jedi'})); 
  jedi.push(new Jedi({name: 'Luminara Unduli', race: 'mirialan', alias: '', homeworld: 'Mirial', status: 'good', master: '', rank: 'Jedi Master'})); 
  jedi.push(new Jedi({name: 'Barriss Offee', race: 'mirialan', alias: '', homeworld: 'Mirial', status: 'naughty', master: 'Luminara Unduli', rank: 'Jedi'})); 
  jedi.push(new Jedi({name: 'Snoke', race: 'alien', alias: '', homeworld: 'Unknown Regions', status: 'bad', master: 'unknown', rank: 'Supreme Leader'})); 
  jedi.push(new Jedi({name: 'Anakin Skywalker', race: 'human', alias: 'Darth Vader', homeworld: 'Tatooine', status: 'insipid', master: 'Obi Wan Kenobi', rank: 'Sith Lord'})); 
  jedi.push(new Jedi({name: 'Sheev Palpatine', race: 'human', alias: 'Darth Sidious', homeworld: 'Naboo', status: 'really bad', master: 'Darth Plagueis', rank: 'Sith Lord'})); 
  return jedi; }

This sets up our initial store of Jedi for use in our demo.
Finally, the API itself:

import { HTTP_INTERCEPTORS, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http'; 
import { Observable } from 'rxjs/Observable'; 
import { Injectable } from '@angular/core'; 
import { Jedi } from './jedi'; 
import 'rxjs/add/observable/of'; 
import 'rxjs/add/operator/mergeMap'; 
import 'rxjs/add/operator/materialize'; 
import 'rxjs/add/operator/dematerialize'; 
import 'rxjs/add/operator/delay'; 
import { createTestData } from './mock.data.seeder';

@Injectable() export class MockApi implements HttpInterceptor {

constructor() {}

intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {

    return Observable.of(null).mergeMap(() => {

      if (request.url.endsWith('/api/jedi') && request.method === 'GET') {
        const jedi: Jedi[] = JSON.parse(localStorage.getItem('jedi'));
        return Observable.of(new HttpResponse({status: 200, body: jedi}));
      }

      if (request.url.match('/api/reset') && request.method === 'DELETE') {
        localStorage.clear();
        const jedi: Jedi[] = createTestData();
        localStorage.setItem('jedi', JSON.stringify(jedi));

        return Observable.of(new HttpResponse({status: 200, body: 'cleared'}));
      }

      / pass through any requests not handled above
      return next.handle(request);
    })

      .materialize()
      .delay(500)
      .dematerialize();

} }

export let fakeBackendProvider = { / use fake backend in place of Http service for backend-less development 
  provide: HTTP_INTERCEPTORS, 
  useClass: MockApi, 
  multi: true 
}; 

This component behaves like a webservice in every way. In fact, this is how many people set up mock services for functional testing. It uses local storage as the database, it returns Observables and it even adds a half-second delay as if you are going over the wire to get the response.

Initially, there are just two endpoints. The /api/reset DELETE endpoint is there to re-initialise our base setup of 15 Jedi. We’ll be able to call this from our UI to reset everything. The /api/jedi GET endpoint is the most basic “get all jedi” method from which we return all Jedi that are currently in localStorage.

We’ll be returning to the MockApi later, for now, we have what we need.

Setting up the Angular Project

The next step is to make a service for our application, so we go back to the command line and do

ng generate service _services/jedi

Unfortunately, this will create a -services directory, so you’ll have to go in and fix that by hand. Basically, I like to give the non-component directories an underscore to keep them together in my project.

A jedi.service.ts file will have been created in the _services directory. In here, we implement a couple of service methods that our components will call.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Jedi } from '../_mockapi/jedi';

@Injectable()
export class JediService {

  constructor(private  HttpClient) { }

  getAll() {
    console.log('getAll() called');
    return this.http.get<Jedi[]>('/api/jedi');
  }

  clearTheBoards() {
    return this.http.delete<any>('/api/reset');
  }
}

jedi.service.ts

These methods mirror those in the MockApi, and also return Observables. Now, observables basically take asynchrony to heart and you can only execute these methods by calling them with subscribe() as in…

this.jedi: Jedi[] = [];
    this.jediService.getAll().subscribe(
      jedi => {
        this.jedi = <jedi[]>jedi;
      }
    );
    / some other code relying on this.jedi.length > 0

So that if you rely on this.jedi having anything other than length = 0 by the time we get to the comment line, then you’re going to be let down. This causes great confusion amongst many Angular developers, including myself for a long time. To help out we’ll create a route resolver, so that there is a better entry into the components.

so lets make our component and finishe the set up.

It’s sorta traditional to leave the app.component, we already have, alone and do our main development in a component built for the purpose. so lets go back to the command line and make that component.

ng generate component jedi

and while we’re on the command line, lets create the routing component and the route resolver as well

ng generate module app-routing --flat --module=app
ng generate service _services/jedi.resolver

By the end of all of this, your file structure should like like this:

Of course neither of these modules do much yet, so you’ll need to set up both to look like the following:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { JediResolverService } from './_services/jedi.resolver.service';
import { JediComponent } from './jedi/jedi.component';

const routes: Routes = [
  { path: '', redirectTo: 'jedi', pathMatch: 'full' },
  { path: 'jedi', component: JediComponent, resolve: {jedi: JediResolverService} },
  / otherwise redirect to login
  { path: '**', redirectTo: '' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import { ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot } from '@angular/router';
import { JediService } from './jedi.service';
import { Jedi } from '../_mockapi/jedi';

@Injectable()
export class JediResolverService implements Resolve<Observable> {

  constructor(
    private service: JediService,
    private router: Router
  ) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable {
     return this.service.getAll()
      .catch(err => {
        console.error(err); / deal with API error (eg not found)
        this.router.navigate(['/']); / could redirect to error page
        return Observable.of<Jedi[]>();
      });
  }
}

We’ll also need to make a change to app.component.html to replace its current content with the router-outlet: it’s entire content should be simply…

<router-outlet></router-outlet>

Finally, after adding all this stuff, make sure that your app.module.ts looks like the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { JediComponent } from './jedi/jedi.component';
import { AppRoutingModule } from './app-routing.module';
import { fakeBackendProvider } from './_mockapi/mock.api';
import { JediResolverService } from './_services/jedi.resolver.service';
import { JediService } from './_services/jedi.service';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    JediComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule
  ],
  providers: [
    fakeBackendProvider,
    JediResolverService,
    JediService],
  bootstrap: [AppComponent]
})
export class AppModule { }

OK, so now the project is ready to use, we can now turn to the data and the table display.

A Simple Display Table

Its probably a good idea to check that your project compiles. Set up a terminal to your project directory and run: ng serve This will tell you if everything is fine, or not. Finally, go to a browser and type: localhost:4200 and you should see the following appear:

The router has redirected the empty route, ”, to the value “jedi” and the generated content is viewable.

Our next step is to go to the jedi.component.ts file and replace its contents with the following:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { JediService } from '../_services/jedi.service';

@Component({
  selector: 'app-jedi',
  templateUrl: './jedi.component.html',
  styleUrls: ['./jedi.component.css']
})
export class JediComponent implements OnInit {

  data: any;
  constructor(
    private route: ActivatedRoute,
    private jediService: JediService,
    private router: Router
  ) { }

  ngOnInit() {
    this.data = this.route.snapshot.data;
    console.log(this.route.snapshot.data);
  }

  reset() {
    this.jediService.clearTheBoards().subscribe(
      data => {
        console.log(data);
        this.router.navigate(['/jedi']);
      }
    );
  }
}

And then we go to the jedi.component.html replacing the generated content with the basic table we will be using:

<div *ngIf="!data.jedi || data.jedi.length === 0">There are no Jedi, we are in a dark age, indeed! <button (click)="reset()">Start Academy</button></div>
<table *ngIf="data.jedi && data.jedi.length > 0">
  <tr>
    <th>Name</th>
    <th>Race</th>
    <th>Homeworld</th>
    <th>Status</th>
    <th>Master</th>
    <th>Rank</th>
    <th>Actions</th>
  </tr>
  <tr *ngFor="let j of data.jedi">
    <td>{{j.name}}</td>
    <td>{{j.race}}</td>
    <td>{{j.homeworld}}</td>
    <td>{{j.status}}</td>
    <td>{{j.master}}</td>
    <td>{{j.rank}}</td>
    <td></td>
  </tr>
</table>

Now when you go to localhost:4200, you should see a basic table showing the Jedi in all their glory.

Next up, we’re going to turn all of those entries in the table into reactive form inputs.