Medhat Elmasry: Build CRUD Angular 2 app that works with a Web API service

This is a follow up article on a previous post where I talked about using Consuming a RESful API with Angular 2 using angular-cli. In this article I will build an Angular 2 application that is more complete with routing and CRUD services that interact with a remote Web API service.

To proceed with this tutorial, it is assumed that you have the following applications already installed on your computer:

node.js
angular-cli

The first step is to create an application named ng2-flintstones. Type the following within a working directory in a terminal windows:

ng new ng2-flintones

Change to the newly created directory that houses your application with:

cd ng2-flintones

Start the application with this command:

ng serve

Point your browser to http://localhost:4200. You should see this web page:

Open the ng2-flinstones folder in Visual Studio Code. Open app.component.ts and modify the class definition so that it looks like this:

import { Component } from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
PersonId = 1;
FirstName = "Fred";
LastName = "Flintstone";
Occupation = "Mining Manager";
Gender = "M";
Picture = "http://flintstones.zift.ca/images/flintstone/fred.png";
}

Modify app.component.html so that it has the following markup:

<p>Person ID: {{PersonId}}</p>
<p>First Name: {{FirstName}}</p>
<p>Last Name: {{LastName}}</p>
<p>Occupation: {{Occupation}}</p>
<p>Gender: {{Gender}}</p>
<p>Picture: <img src="{{Picture}}" alt="{{FirstName}} {{LastName}}" /></p>

Refresh your browser. You will be able to see the data that was initialized in the AppComponent class.
Instead of displaying literal data, let us create a CartoonCharacter class. Enter the following command in a terminal window while in the root folder of your application:

ng generate class CartoonCharacter

The above command produces a CartoonCharacter class file named cartoon-character.ts. Modify CartoonCharacter so that it looks like this:

export class CartoonCharacter {
PersonId: number;
FirstName: string;
LastName: string;
Occupation: string;
Gender: string;
Picture: string;
}

Replace the contents of app.component.ts with the following code:

import { Component } from '@angular/core';
import {CartoonCharacter} from './cartoon-character';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
character: CartoonCharacter = {
    PersonId: 1,
    FirstName: "Fred",
    LastName: "Flintstone",
    Occupation: "Mining Manager",
    Gender: "M",
    Picture: "http://flintstones.zift.ca/images/flintstone/fred.png",
};
}

Now that we introduced a class, we can change app.component.html so that it contains the following markup:

<p>Person ID: {{ character.PersonId}}</p>
<p>First Name: {{ character.FirstName}}</p>
<p>Last Name: {{ character.LastName}}</p>
<p>Occupation: {{ character.Occupation}}</p>
<p>Gender: {{ character.Gender}}</p>
<p>Picture: <img src="{{ character.Picture}}"
alt="{{ character.FirstName}} {{ character.LastName}}" /></p>

Refresh the web page. It should appear just like it did previously. The only difference is that we rendered data from an instance of a CartoonCharacter class.

Add the following HTML to the bottom of the app.component.html file:

<div>
    <p><label>First Name: </label><input value="{{ character.FirstName}}" placeholder="FirstName"></p>
    <p><label>Last Name: </label><input value="{{ character.LastName}}" placeholder="LastName"></p>
    <p><label>Occupation: </label><input value="{{ character.Occupation}}" placeholder="Occupation"></p>
    <p><label>Gender: </label><input value="{{ character.Gender}}" placeholder="M or F"></p>
    <p><label>Picture: </label><input value="{{ character.Picture}}" placeholder="Picture"></p>
</div>

Refresh the page and you will notice that some input boxes were added. Unfortunately, if you edit a data item in the text box it does not change above. We will fix that by implementing 2-way binding using [(ngModel)]. Replace app.component.html with the following:

<p>Person ID: {{character.PersonId}}</p>
<p>First Name: {{character.FirstName}}</p>
<p>Last Name: {{character.LastName}}</p>
<p>Occupation: {{character.Occupation}}</p>
<p>Gender: {{character.Gender}}</p>
<p>Picture: <img src="{{character.Picture}}"
alt="{{character.FirstName}} {{character.LastName}}" /></p>
<div>
    <p><label>First Name: </label><input [(ngModel)]="character.FirstName" placeholder="FirstName"></p>
    <p><label>Last Name: </label><input [(ngModel)]="character.LastName" placeholder="LastName"></p>
    <p><label>Occupation: </label><input [(ngModel)]="character.Occupation" placeholder="Occupation"></p>
    <p><label>Gender: </label><input [(ngModel)]="character.Gender" placeholder="M or F"></p>
    <p><label>Picture: </label><input [(ngModel)]="character.Picture" placeholder="Picture"></p>
</div>

View page. When you change any of the fields the other data changes.
Create a new folder under app named data. In that folder create a file named dummy-data.ts with following content:

import {CartoonCharacter} from '../cartoon-character';
export const DUMMY_DATA: CartoonCharacter[] = [
{"PersonId":1,"FirstName":"Fred","LastName":"Flintstone","Occupation":"Mining Manager","Gender":"M","Picture":"http://flintstones.zift.ca/images/flintstone/fred.png"},
{"PersonId":2,"FirstName":"Barney","LastName":"Rubble","Occupation":"Mining Assistant","Gender":"M","Picture":"http://flintstones.zift.ca/images/flintstone/barney.png"},
{"PersonId":3,"FirstName":"Betty","LastName":"Rubble","Occupation":"Nurse","Gender":"F","Picture":"http://flintstones.zift.ca/images/flintstone/betty.png"},
{"PersonId":4,"FirstName":"Wilma","LastName":"Flintstone","Occupation":"Teacher","Gender":"F","Picture":"http://flintstones.zift.ca/images/flintstone/wilma.png"},
{"PersonId":5,"FirstName":"Bambam","LastName":"Rubble","Occupation":"Baby","Gender":"M","Picture":"http://flintstones.zift.ca/images/flintstone/bambam.png"},
{"PersonId":6,"FirstName":"Pebbles","LastName":"Flintstone","Occupation":"Baby","Gender":"F","Picture":"http://flintstones.zift.ca/images/flintstone/pebbles.png"},
{"PersonId":7,"FirstName":"Dino","LastName":"Flintstone","Occupation":"Pet","Gender":"F","Picture":"http://flintstones.zift.ca/images/flintstone/dino.png"}
]
Add to app.component.ts the following import statement:

import {DUMMY_DATA} from './data/dummy-data';

Add the following instance variable to the AppComponent class:

characters = DUMMY_DATA;

There is a form module that needs to be added to our project because we will be displaying and accepting data from a form. Therefore, find app.module.ts and add to it the following import code at the top of the file:

import { FormsModule} from '@angular/forms'

Also, add FormsModule to the imports array in the same app.module.ts file.

In order to display a collection of cartoon-characters, replace app.component.html with the following markup:

<table *ngIf="characters" border="1">
<thead>
    <tr>
      <th>Person ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Occupation</th>
      <th>Gender</th>
      <th>Picture</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let c of characters; let i=index; ">
      <td>{{c.PersonId}}</td>
      <td>{{c.FirstName}}</td>
      <td>{{c.LastName}}</td>
      <td>{{c.Occupation}}</td>
      <td>{{c.Gender}}</td>
      <td><img src="{{c.Picture}}"
        alt="{{c.FirstName}} {{c.LastName}}" /></td>
    </tr>
</tbody>
</table>
<p>Person ID: {{character.PersonId}}</p>
<p>First Name: {{character.FirstName}}</p>
<p>Last Name: {{character.LastName}}</p>
<p>Occupation: {{character.Occupation}}</p>
<p>Gender: {{character.Gender}}</p>
<p>Picture: <img src="{{character.Picture}}"
        alt="{{character.FirstName}} {{character.LastName}}" /></p>
<div>
    <p><label>First Name: </label><input [(ngModel)]="character.FirstName" placeholder="FirstName"></p>
    <p><label>Last Name: </label><input [(ngModel)]="character.LastName" placeholder="LastName"></p>
    <p><label>Occupation: </label><input [(ngModel)]="character.Occupation" placeholder="Occupation"></p>
    <p><label>Gender: </label><input [(ngModel)]="character.Gender" placeholder="M or F"></p>
    <p><label>Picture: </label><input [(ngModel)]="character.Picture" placeholder="Picture"></p>
</div>

Now when you view the page once more you will notice that whenever you change a data item in the textbox it also changes above.

We want the user to select a cartoon-character from our list, and have the selected character appear in the details view. Modify the opening <tr> tag by inserting an Angular event binding to its click event, like this:

In the AppComponent class, replace the character declaration with:

selected: CartoonCharacter;

Now add an onSelect method to AppComponent that sets the selected property to the character the user clicked on.

onSelect(character: CartoonCharacter): void {
this.selected= character;
}

We will be showing the selected character details in our template. Now, it is still referring to the old character property. Let’s fix the template to bind to the new selected property.

Hide the empty detail with *ngIf

When our app loads we see a list of characters, but a cartoon-character is not selected. The selected property is undefined. That’s why we'll see the following error in the browser’s console:

EXCEPTION: TypeError: Cannot read property 'PersonId' of undefined in [null]
Wrap the HTML cartoon character detail content of our template with a <div>. Then we add the *ngIf built-in directive and set it to the selected property of our component like this:
<div *ngIf="selected">
<p>Person ID: {{selected.PersonId}}</p>
<p>First Name: {{selected.FirstName}}</p>
<p>Last Name: {{selected.LastName}}</p>
<p>Occupation: {{selected.Occupation}}</p>
<p>Gender: {{selected.Gender}}</p>
<p>Picture: <img src="{{selected.Picture}}" alt="{{selected.FirstName}} {{selected.LastName}}" /></p>
<div>
    <p><label>First Name: </label><input [(ngModel)]="selected.FirstName" placeholder="FirstName"></p>
    <p><label>Last Name: </label><input [(ngModel)]="selected.LastName" placeholder="LastName"></p>
    <p><label>Occupation: </label><input [(ngModel)]="selected.Occupation" placeholder="Occupation"></p>
    <p><label>Gender: </label><input [(ngModel)]="selected.Gender" placeholder="M or F"></p>
    <p><label>Picture: </label><input [(ngModel)]="selected.Picture" placeholder="Picture"></p>
</div>
</div>

CSS

Let us change the background color for a row when it is selected. Add the following CSS into the app.component.css file:

.selected {
background-color: #CFD8DC !important;
color: darkblue;
}

In app.component.html, add the following to the <tr> tag that manages the iteration:

[class.selected]="c === selected"

The <tr> tag would look like this:

<tr *ngFor="let c of characters; let i=index;" (click)="onSelect(c)" [class.selected]="c === selected">

Separating the character details

Add a new details component with the following terminal command:

ng generate component CharacterDetail

This produces the following files:

src\app\character-detail\character-detail.component.css
src\app\character-detail\character-detail.component.html
src\app\character-detail\character-detail.component.spec.ts
src\app\character-detail\character-detail.component.ts

In character-detail.component.ts, modify the import statement so that it also imports “Input” as follows:

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

Move the whole <div> block that contains detail information from the app.component.html file to the character-detail.component.html file. Do a search and replace from “selected.” to “character.”. The contents of character-detail.component.html will look like this:

<div *ngIf="character">
<p>Person ID: {{character.PersonId}}</p>
<p>First Name: {{character.FirstName}}</p>
<p>Last Name: {{character.LastName}}</p>
<p>Occupation: {{character.Occupation}}</p>
<p>Gender: {{character.Gender}}</p>
<p>Picture: <img src="{{character.Picture}}" alt="{{character.FirstName}} {{character.LastName}}" /></p>
<div>
    <p><label>First Name: </label><input [(ngModel)]="character.FirstName" placeholder="FirstName"></p>
    <p><label>Last Name: </label><input [(ngModel)]="character.LastName" placeholder="LastName"></p>
    <p><label>Occupation: </label><input [(ngModel)]="character.Occupation" placeholder="Occupation"></p>
    <p><label>Gender: </label><input [(ngModel)]="character.Gender" placeholder="M or F"></p>
    <p><label>Picture: </label><input [(ngModel)]="character.Picture" placeholder="Picture"></p>
</div>
</div>

Add the cartoon-character property

Add a character property to the CharacterDetailComponent component class:

@Input()
character: CartoonCharacter;

Also, import the CartoonCharacter class with the following import statement.

import {CartoonCharacter} from '../cartoon-character';

The CharacterDetailComponent class must be told what cartoon-character to display by the parent AppComponent class. This will be placed in the <app-character-detail> tag as follows:

<app-character-detail [character]="selected"></app-character-detail>

We will update app.component.html with this later. Meantime, annotate the character property with the @Input decorator that we imported earlier.

Refresh the AppComponent

Open app.component.html and replace the <div> tag that is responsible for displaying selected data with the following:

<app-character-detail [character]="selected"></app-character-detail>

The app.component.html file should now look like this:

<table *ngIf="characters" border="1">
<thead>
    <tr>
      <th>Person ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Occupation</th>
      <th>Gender</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let c of characters; let i=index;" (click)="onSelect(c)" [class.selected]="c === selected">
      <td>{{c.PersonId}}</td>
      <td>{{c.FirstName}}</td>
      <td>{{c.LastName}}</td>
      <td>{{c.Occupation}}</td>
      <td>{{c.Gender}}</td>
    </tr>
</tbody>
</table>

<app-character-detail [character]="selected"></app-character-detail>

Check the web application in your browser and make sure that it works and behaves just as it did before we separated out the details about our characters.

Creating a CartoonCharacter service

Next, we will create a cartoon-character service that can be used from a multitude of components. To this end, execute the following instruction from a terminal window while in the root folder:

ng generate service CartoonCharacter

This produces the following files:

src\app\cartoon-character.service.spec.ts
src\app\cartoon-character.service.ts

Add an empty getCartoonCharacters() method to the CartoonCharacterService class as follows:

getCartoonCharacters(): void { }

Add the following import commands to the new service cartoon-character.service.ts file:

import {DUMMY_DATA} from './data/dummy-data';
import {CartoonCharacter} from './cartoon-character'

In app.component.ts, change ‘characters = DUMMY_DATA;’ to ‘characters: CartoonCharacter[];’ and delete the DUMMY_DATA import statement. The app.component.ts should look like this:

import { Component } from '@angular/core';
import {CartoonCharacter} from './cartoon-character';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
/*
character: CartoonCharacter = {
    PersonId: 1,
    FirstName: "Fred",
    LastName: "Flintstone",
    Occupation: "Mining Manager",
    Gender: "M",
    Picture: "http://flintstones.zift.ca/images/flintstone/fred.png",
};
*/
selected: CartoonCharacter;
characters: CartoonCharacter[];
onSelect(character: CartoonCharacter): void {
    this.selected = character;
}
}

In the CartoonCharacterService class, replace the getCartoonCharacters() method with the following code:

getCartoonCharacters(): CartoonCharacter[] {
return DUMMY_DATA;
}

The cartoon-character.service.ts file now should look like this:

import { Injectable } from '@angular/core';
import {DUMMY_DATA} from './data/dummy-data';
import {CartoonCharacter} from './cartoon-character'
@Injectable()
export class CartoonCharacterService {
constructor() { }
getCartoonCharacters(): CartoonCharacter[] {
return DUMMY_DATA;
}
}

Using the CartoonCharacter service

We will be using the new service in app.component.ts. Back in that file, import the service with the following statement:

import {CartoonCharacterService} from './cartoon-character.service';

We do not want to instantiate a new instance of CartoonCharacterService. Instead, we will use dependency injection. Add the following constructor to the AppComponent class:

constructor(private cartoonService: CartoonCharacterService) { }

Add the following providers array to @Component for the AppComponent class:

providers: [CartoonCharacterService]

Add the following method to AppComponent:

getCartoonCharacters(): void {
this.characters = this.cartoonService.getCartoonCharacters();
}

Instead of making a call to getCartoonCharacters() from within the constructor of AppComponent, we will make a call when the component gets initialized. This is best done in the ngOnInit() method.

To do this we need to import OnInit and implement OnInit. We will then make a call to getCartoonCharacters() from within the ngOnInit() method. Here’s what app.component.ts should now look like:

import { Component, OnInit } from '@angular/core';
import {CartoonCharacter} from './cartoon-character';
import {CartoonCharacterService} from './cartoon-character.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [CartoonCharacterService]
})
export class AppComponent implements OnInit {
selected: CartoonCharacter;
characters: CartoonCharacter[];
constructor(private cartoonService: CartoonCharacterService) { }
onSelect(character: CartoonCharacter): void {
    this.selected = character;
}
getCartoonCharacters(): void {
    this.characters = this.cartoonService.getCartoonCharacters();
}
ngOnInit(): void {
    this.getCartoonCharacters();
}
}

Our application should be working fine now.

There is one problem, though. Our service is not making async calls. We will change that. Change the getCartoonCharacters() method in the CartoonCharacterService class to the following:

getCartoonCharacters(): Promise<CartoonCharacter[]> {
return Promise.resolve(DUMMY_DATA);
}

Since this returns a promise, we will need to change the way this method is called. Back in AppComponent class, change the getCartoonCharacters() method to the following:

getCartoonCharacters(): void {
this.cartoonService.getCartoonCharacters()
.then(characters => this.characters = characters);
}

Routing around our app

We will build a menu system with links allowing us to choose what it is we want to do. Now, we only have one page. This is not very realistic for a larger project. Our revised app should display a shell with a choice of views (Dashboard and Cartoon Characters) and then default to one of them. The first task is to move the display of cartoon-characters out of AppComponent and into its own CartoonCharacterComponent.

Let us create a new component named CartoonCharacterComponent with the following terminal command:

ng generate component CartoonCharacter

The following files get generated:

src\app\cartoon-character\cartoon-character.component.css
src\app\cartoon-character\cartoon-character.component.html
src\app\cartoon-character\cartoon-character.component.spec.ts
src\app\cartoon-character\cartoon-character.component.ts

Since AppComponent is doing the work that we want CartoonCharacterComponent to do, let us simply copy the contents of AppComponent to CartoonCharacterComponent:
|

Copy Contents from …	to …
app.component.html	cartoon-character.html
app.component.css	cartoon-character.css
app.component.ts	cartoon-character.ts

Also:

change the app-root selector in copied contents of cartoon-character.component.ts to cartoon-character-component
delete the providers array line – providers: [CartoonCharacterService]
adjust the filenames in cartoon-character.component.ts to match the actual .html and .css files
app.component.html should contain only the following markup:

<cartoon-character-component></cartoon-character-component>

Make sure the content of app.component.ts has the following code’:

import { Component } from '@angular/core';
import { CartoonCharacterService } from './cartoon-character.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [CartoonCharacterService]
})
export class AppComponent {
title = 'The Flintstones';
}
Check out the application, it should be working fine just like before.

Routing

The next big task is to add routes and links to our main landing page. Open app.module.ts in your editor and add the following import statement:

import { RouterModule } from '@angular/router';

Define our first route by adding the following to the imports array:

RouterModule.forRoot([
{
path: 'characters',
component: CartoonCharacterComponent
}
])

app.module.ts now looks like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { CharacterDetailComponent } from './character-detail/character-detail.component';
import { CartoonCharacterComponent } from './cartoon-character/cartoon-character.component';
import { RouterModule } from '@angular/router';
@NgModule({
declarations: [
    AppComponent,
    CharacterDetailComponent,
    CartoonCharacterComponent
],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      {
        path: 'characters',
        component: CartoonCharacterComponent
      }
    ])
],
providers: [],
bootstrap: [AppComponent],

})
export class AppModule { }

The route definition has the following parts:

path: the router matches this route's path to the URL in the browser address bar (characters).
component: the component that the router should create when navigating to this route (CartoonCharacterComponent).

Router Outlet

If we paste the path, /characters, into the browser address bar, the router should match it to the characters route and display the CartoonCharacterComponent. But where?

We must tell it where by adding a <router-outlet> element to the bottom of the template. The router displays each component immediately below the <router-outlet> as we navigate through the application.

Edit the app.component.html file. Replace <cartoon-characters></cartoon-characters> with the following markup:

<nav>
<a routerLink="/characters">Cartoon Characters</a>
</nav>
<router-outlet></router-outlet>

When you run the application, you will see a link as follows:

When you click on the “Cartoon Characters” link, two things happen:

The address line in your browser changes to: http://localhost:4200/characters
The contents of CartoonCharacterComponent are injected into <router-outlet></router-outlet>

Adding another dashboard link

Create another component named DashboardComponent by executing the following in a terminal window:

ng generate component Dashboard

This causes the following files to be created for us:

src\app\dashboard\dashboard.component.css
src\app\dashboard\dashboard.component.html
src\app\dashboard\dashboard.component.spec.ts
src\app\dashboard\dashboard.component.ts

Add another route to app.module.ts as shown below:

{
path: 'dashboard',
component: DashboardComponent
},

Next, let us add one more link to app.component.html. Our latest iteration of app.component.html looks like this:

<h1>{{title}}</h1>
<nav>
<a routerLink="/dashboard">Dashboard</a>
<a routerLink="/characters">Cartoon Characters</a>
</nav>
<router-outlet></router-outlet>

At this point, when you run the application this is what you should see:

Of course, we still need to develop our DashboardComponent class. Modify dashboard.component.ts so that it looks like this:

import { Component, OnInit } from '@angular/core';
import {CartoonCharacter} from '../cartoon-character';
import {CartoonCharacterService} from '../cartoon-character.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
characters: CartoonCharacter[];
constructor(private cartoonService: CartoonCharacterService) { }
ngOnInit() {
this.cartoonService.getCartoonCharacters()
.then(results => this.characters = results.slice(0, 4));
}
}

Also, modify dashboard.component.html so that it looks like this:

<h3>The Flintstones Family</h3>
<p *ngFor="let c of characters" class="col-lg-4">
{{c.FirstName}} {{c.LastName}}
</p>

Refresh the browser and see four cartoon characters in the new dashboard as shown below:

Click on “Cartoon Characters” and you will see our table with details.

Routing to our Cartoon Character details

One refinement that is overdue is to navigate to a details page if the user clicks on a character on our dashboard.

We need to add an additional method to CartoonCharacterService that retrieves a single record by id. Open CartoonCharacterService and add a getCartoonCharacterById() method that filters the cartoon-characters list from getCartoonCharacters() by id:

getCartoonCharacterById(id: number): Promise<CartoonCharacter> {
return this.getCartoonCharacters()
.then(result => result.find(character => character.PersonId === id));
}

We'll add a route to the CharacterDetailComponent in app.module.ts where our other routes are configured. Add the following route definition to app.module.ts:

{
path: 'detail/:id',
component: CharacterDetailComponent
},

The colon (:) in the path indicates that :id is a placeholder to be filled with a specific cartoon character id when navigating to the CharacterDetailComponent.

The revised CharacterDetailComponent should take the id parameter from the params observable in the ActivatedRoute service and use the CartoonCharacterService to fetch the cartoon character with that id.

Add the following import statements to character-detail.component.ts:

import { ActivatedRoute, Params } from '@angular/router';
import { Location } from '@angular/common';
import { CartoonCharacterService } from '../cartoon-character.service';

Let's have the ActivatedRoute, CartoonCharacterService and Location services injected into the constructor, saving their values in private fields:

constructor(
private cartoonService: CartoonCharacterService,
private route: ActivatedRoute,
private location: Location
) { }

Inside the ngOnInit lifecycle method, we use the params observable to extract the id parameter value from the ActivatedRoute service and use the CartoonCharacterService to fetch the cartoon-character with that id.

ngOnInit() {
this.route.params.forEach((params: Params) => {
    let id = +params['id'];
    this.cartoonService.getCartoonCharacterById(id)
      .then(result => this.character = result);
});
}

Notice how we extract the id by calling the forEach method, which will deliver our array of route parameters. The cartoon character id is a number. Route parameters are always strings. So, we convert the route parameter value to a number with the JavaScript (+) operator.

Also, add this method to character-detail.component.ts so that we can go back:

goBack(): void {
this.location.back();
}

Add the following markup to character-detail.component.html so that it now looks like this:

<div *ngIf="character">
<p>Person ID: {{character.PersonId}}</p>
<p>First Name: {{character.FirstName}}</p>
<p>Last Name: {{character.LastName}}</p>
<p>Occupation: {{character.Occupation}}</p>
<p>Gender: {{character.Gender}}</p>
<p>Picture: <img src="{{character.Picture}}" alt="{{character.FirstName}} {{character.LastName}}" /></p>
<div>
    <p><label>First Name: </label><input [(ngModel)]="character.FirstName" placeholder="FirstName"></p>
    <p><label>Last Name: </label><input [(ngModel)]="character.LastName" placeholder="LastName"></p>
    <p><label>Occupation: </label><input [(ngModel)]="character.Occupation" placeholder="Occupation"></p>
    <p><label>Gender: </label><input [(ngModel)]="character.Gender" placeholder="M or F"></p>
    <p><label>Picture: </label><input [(ngModel)]="character.Picture" placeholder="Picture"></p>
</div>
<button (click)="goBack()">Back</button>
</div>

When a user selects a cartoon-character on the dashboard, the app should navigate to the CharacterDetailComponent to view and edit the selected cartoon-character.

To achieve this effect, reopen the dashboard.component.html and replace the repeated <div *ngFor...> tags with <a> tags so that it looks like this:

<h3>The Flintstones Family</h3>
<a *ngFor="let c of characters" [routerLink]="['/detail', c.PersonId]" class="col-lg-4">
<p>{{c.FirstName}} {{c.LastName}}</p>
</a>

Refresh the browser and select a cartoon-character from the dashboard; the app should navigate directly to that cartoon-character’s details.

Clicking on the “Back” button will take you back in the history of the browser.

Refactor routes to a Routing Module

It is wise to put all of our routing rules in a separate file than app.module.ts so it does not get overly bloated. This is especially true if our application is large and has many routes. To this end, create an app-routing.module.ts file in the same folder as app.module.ts. Give it the following contents extracted from the AppModule class:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent }   from './dashboard/dashboard.component';
import { CartoonCharacterComponent } from './cartoon-character/cartoon-character.component';
import { CharacterDetailComponent } from './character-detail/character-detail.component';
const routes: Routes = [
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'detail/:id', component: CharacterDetailComponent },
{ path: 'characters',     component: CartoonCharacterComponent }
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}

Next, let’s update app.module.ts so that it uses app-routing.module.ts. Add the following import statement to app.module.ts.

import { AppRoutingModule } from './app-routing.module';

Also, change the imports array so it looks like this:

imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
],

This would be the latest state of app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { CharacterDetailComponent } from './character-detail/character-detail.component';
import { CartoonCharacterComponent } from './cartoon-character/cartoon-character.component';
import { RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [
    AppComponent,
    CharacterDetailComponent,
    CartoonCharacterComponent,
    DashboardComponent
],
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }

Our application functions properly and behaves as expected.

Select a Cartoon-Character in the CartoonCharacterComponent

Comment out the last line in cartoon-character.component.html so that it looks like this:

When the user selects a cartoon-character from the list, we don't go to the detail page. We show a mini-detail on this page instead and make the user click a button to navigate to the full detail page.

Add the following HTML fragment at the bottom of cartoon-character.component.html:

<div *ngIf="selected">
<h2>
{{selected.FirstName | uppercase}} {{selected.LastName | uppercase}} is favorite cartoon character.
</h2>
<button (click)="gotoDetail()">View Details</button>
</div>

Update the Update the CartoonCharacterComponent class as follows:

Router

import { Router } from '@angular/router';

Router

CartoonCharacterService

constructor(
private cartoonService: CartoonCharacterService,
private router: Router
) { }

gotoDetail()

router.navigate

gotoDetail(): void {
this.router.navigate(['/detail', this.selected.PersonId]);
}

Refresh your browser and checkout the new behavior of the application.

Styling:

Replace dashboard.component.css with the following:

label {
display: inline-block;
width: 3em;
margin: .5em 0;
color: #607D8B;
font-weight: bold;
}
input {
height: 2em;
font-size: 1em;
padding-left: .4em;
}
button {
margin-top: 20px;
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer; cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #ccc;
cursor: auto;
}

Replace contents of cartoon-character.component.css with the following:

label {
display: inline-block;
width: 3em;
margin: .5em 0;
color: #607D8B;
font-weight: bold;
}
input {
height: 2em;
font-size: 1em;
padding-left: .4em;
}
button {
margin-top: 20px;
font-family: Arial;
background-color: #eee;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer; cursor: hand;
}
button:hover {
background-color: #cfd8dc;
}
button:disabled {
background-color: #eee;
color: #ccc;
cursor: auto;
}

Replace contents of app.component.css with the following:

h1 {
font-size: 1.2em;
color: #999;
margin-bottom: 0;
}
h2 {
font-size: 2em;
margin-top: 0;
padding-top: 0;
}
nav a {
padding: 5px 10px;
text-decoration: none;
margin-top: 10px;
display: inline-block;
background-color: #eee;
border-radius: 4px;
}
nav a:visited, a:link {
color: #607D8B;
}
nav a:hover {
color: #039be5;
background-color: #CFD8DC;
}
nav a.active {
color: #039be5;
}

To set the global application styles, replace contents of styles.css with:

/* Master Styles */
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
body, input[text], button {
color: #888;
font-family: Cambria, Georgia;
}
/* . . . */
/* everywhere else */
* {
font-family: Arial, Helvetica, sans-serif;
}

Navigate through the application and experience the refined look.

Working with real data

The data we are viewing is being served from a static array. We need to interact with a real remote service. We will work with a service located at http://flintstones.zift.ca/flintstones/ that delivers the same data as the static array used previously.

Let's convert getCartoonCharacters () in cartoon-character.ts to use HTTP. Add the following import statements to cartoon-character.service.ts:

import { Headers, Http, Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';

Inject the http service into the service’s constructor with the following code:

constructor(private http: Http) { }

Add the following instance variable to the CartoonCharacterService class:

private BASE_URL = "http://flintstones.zift.ca/api/flintstones";

Change method getCartoonCharacters() in cartoon-character.service.ts to the following code:

getCartoonCharacters(): Promise<CartoonCharacter[]> {
return this.http.get(this.BASE_URL)
   .toPromise()
   .then(response => response.json() as CartoonCharacter[])
   .catch(this.handleError);
}

The catch block calls a handleError() method. Add this handleError() method to the CartoonCharacterService class:

private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}

Test the application and you will determine that it works just as before. The big difference is that it is indeed asynchronously retrieving data from a remote data source.

Updating data

The next challenge is to update data. Add the following code to the CartoonCharacterService class:

private headers = new Headers({'Content-Type': 'application/json'});
update(character: CartoonCharacter): Promise<CartoonCharacter> {
const url = `${this.BASE_URL}/${character.PersonId}`;
return this.http
    .put(url, JSON.stringify(character), {headers: this.headers})
    .toPromise()
    .then(() => character)
    .catch(this.handleError);
}

Add the following save button to the bottom of the character-detail.component.html file right after the back button:

The save method persists cartoon-character data changes using the service’s update method, then navigates back to the previous view. Add this save() method to character-detail.component.ts:

save(): void {
this.cartoonService.update(this.character)
.then(() => this.goBack());
}

Refresh the browser and give it a try. Changes to cartoon-character data should now persist.

Add data

Add the following method to the CartoonCharacterService class:

create(newCartoonCharacter: CartoonCharacter): Promise<CartoonCharacter> {
return this.http
    .post(this.BASE_URL, JSON.stringify(newCartoonCharacter), {headers: this.headers})
    .toPromise()
    .then(res => res.json().data)
    .catch(this.handleError);
}

Add this markup to cartoon-character.component.html:

<div>
<p><label>First Name: </label><input [(ngModel)]="newCharacter.FirstName" placeholder="First Name"></p>
<p><label>Last Name: </label><input [(ngModel)]="newCharacter.LastName" placeholder="Last Name"></p>
<p><label>Occupation: </label><input [(ngModel)]="newCharacter.Occupation" placeholder="Occupation"></p>
<p><label>Gender: </label><input [(ngModel)]="newCharacter.Gender" placeholder="M or F"></p>
<p><label>Picture: </label><input [(ngModel)]="newCharacter.Picture" placeholder="Picture URL"></p>
<button (click)="add(newCharacter);">
    Add
</button>
</div>

Add the following to the CartoonCharacterComponent class:

newCharacter: CartoonCharacter = new CartoonCharacter();
add(newCartoonCharacter: CartoonCharacter): void {
newCartoonCharacter.FirstName = newCartoonCharacter.FirstName.trim();
newCartoonCharacter.LastName = newCartoonCharacter.LastName.trim();
newCartoonCharacter.Occupation = newCartoonCharacter.Occupation.trim();
newCartoonCharacter.Gender = newCartoonCharacter.Gender.trim();
newCartoonCharacter.Picture = newCartoonCharacter.Picture.trim();

if (!newCartoonCharacter) { return; }
this.cartoonService.create(newCartoonCharacter)
    .then(newCartoonCharacter => {
      this.selected = null;
      this.router.navigate(['./dashboard']);
    });
}

Refresh the browser and add some sample cartoon-character data.

Deleting data

Add a new column to the table in cartoon-character.component.html and put the following button in a cell after {{c.Gender}}:

<button class="delete" (click)="delete(c); $event.stopPropagation()">x</button>

The entire table in cartoon-character.component.html will look like this:

<table *ngIf="characters" border="1">
<thead>
    <tr>
      <th>Person ID</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Occupation</th>
      <th>Gender</th>
      <th></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let c of characters; let i=index;" (click)="onSelect(c)" [class.selected]="c === selected">
      <td>{{c.PersonId}}</td>
      <td>{{c.FirstName}}</td>
      <td>{{c.LastName}}</td>
      <td>{{c.Occupation}}</td>
      <td>{{c.Gender}}</td>
      <td><button class="delete" (click)="delete(c); $event.stopPropagation()">x</button></td>
    </tr>
</tbody>
</table>

Add the following delete() method to the CartoonCharacterService class:

delete(id: number): Promise<void> {
const url = `${this.BASE_URL}/${id}`;
return this.http.delete(url, {headers: this.headers})
    .toPromise()
    .then(() => null)
    .catch(this.handleError);
}

Add this delete() method to the CartoonCharacterComponent class:

delete(delCharacter: CartoonCharacter): void {
this.cartoonService
      .delete(delCharacter.PersonId)
      .then(() => {
        this.characters = this.characters.filter(c => c !== delCharacter);
        if (this.selected === delCharacter) { this.selected = null; }
      });
}

Refresh the browser and try the new delete the records that you created.

Conclusion

In this post, we have developed a well structured Angular 2 application that interacts with real data. If you and retrieve, add, update, and delete data then you are in a position to do some true an real world single page applications with Angular 2.

References:

https://angular.io/docs/ts/latest/tutorial/

Medhat Elmasry

Sunday, November 13, 2016

Build CRUD Angular 2 app that works with a Web API service

Hide the empty detail with *ngIf

CSS

Separating the character details

Add the cartoon-character property

Refresh the AppComponent

Creating a CartoonCharacter service

Using the CartoonCharacter service

Routing around our app

Routing

Router Outlet

Adding another dashboard link

Routing to our Cartoon Character details

Refactor routes to a Routing Module

Select a Cartoon-Character in the CartoonCharacterComponent

Styling:

Working with real data

Updating data

Add data

Deleting data

Conclusion

References:

No comments:

Post a Comment

About Me

Blog Archive