Integrating ASP.NET Core Web API with Angular application

In the preceding section, we added and modified the Web API controller and introduced methods for HTTP verbs to deal with the Todo items. Now, let's modify our Angular code to consume all the Web API methods to manage the Todo items.

Updating a model in an Angular app

First, we need to add the id property to Todo.ts in an Angular app to hold the ID of the Todo item received from the API. So, the updated Todo.ts will look as follows:

export class Todo { 
    id: number; 
    title: string; 
    completed: boolean; 
    constructor(id: number, title: string, completed: 
    boolean) { 
        this.id = id; 
        this.title = title; 
        this.completed = completed; 
    } 
    set isCompleted(value: boolean) { 
        this.completed = value; 
    }  
}  

The constructor takes three arguments: id, title, and completed, and assigns them to the id, title, and completed properties respectively, accessing them using the this keyword...