First, let's update the TodoService that consumes Web API service to fetch a list of Todo items. We will use the Http service to communicate with Web API service:

1. Open the todoService.ts file in an app folder.
2. Add the following import statements to import modules such as Injectable, Http, headers, Response, Observable, map, and Todo:

   import { Injectable } from '@angular/core'; 
   import { Http, Headers } from '@angular/http'; 
   import 'rxjs/add/operator/toPromise';
   import { Todo } from './todo'

3. Modify constructor to inject the Http service by adding the parameter for the Http service:

  constructor (private http: Http) { ... } 

4. Add the getTodos method to consume the Web API service to get the list of Todo items using the Http tag:

     getTodos(): Promise<Array<Todo>> { 
        return this.http.get('/api/todos') 
            .toPromise() 
            .then(response => response.json() as   
             Array<Todo>) 
            .catch(this.handleError); 
     }

Here, the toPromise method converts the Observable sequence returned by the Get method of http. Then, we call the then method or the catch method on the returned promise. We convert the JSON received in response into an array of Todo.

5. We just added the getTodos method. Next, let's add the getPendingTodos method to consume the GET method that is configured with the pending-only route in the Web API that removes the completed Todo items from the database and returns only the pending Todo items. The code snippet of GetPendingTodos is as follows:

    getPendingTodos() { 
    this.http.get('http://localhost:2524/api/todos/    
    pending-only') 
         .subscribe( 
         err => console.log(err), 
         () => console.log('getTodos Complete') 
         ); 
    } 

Note that we have not updated the todos view model in the Angular app with the returned pending todo items because we filtered the Todo collection in Angular itself to discard the completed Todo items, as shown in the following code snippet of app.component.ts:

       getPending() { 
       return this.todos.filter((todo: Todo) =>   
       todo.completed === false); 
   } 

The updated todo.service.ts with the code that consumes both the GET methods of the Web API is as follows:

import { Injectable } from '@angular/core'; 
import { Http, Headers } from '@angular/http'; 
import 'rxjs/add/operator/toPromise';
import { Todo } from './todo' 
@Injectable() 
export class TodoService { 
    constructor(private http: Http) {    } 
    getTodos(): Promise<Array<Todo>> { 
        return this.http.get('/api/todos') 
            .toPromise() 
            .then(response => response.json() as Array<Todo>) 
            .catch(this.handleError); 
    } 
    getPendingTodos() { 
        this.http.get('/api/todos/pending-only') 
            .subscribe( 
            err => console.log(err), 
            () => console.log('getTodos Complete') 
            ); 
    }    
    removeCompleted() { 
        this.getPendingTodos();         
    } 
    private handleError(error: any): Promise<any> { 
        console.error('An error occurred', error);  
        return Promise.reject(error.message || error); 
    } 
}