Moving into projects

Within this topic, we're going to implement the changes needed to move our simple task list into a structure that is organized by projects. For this purpose, we need to modify the main layout of our components as well as introduce a new component that represents our projects.

Project service

First, let's update our application model to include project data. For this, we're going to create a new model for a project as well as update the model of our tasks to add a project ID.

Open up the src/app/model.ts file and apply the following changes:

export interface Task {
  readonly id?: number;
readonly projectId?: number;
  readonly title: string;
  readonly done: boolean;
}

export type TaskListFilterType = 'all' | 'open' | 'done';

export interface Project {
  readonly id?: number;
  readonly title: string;
  readonly description: string;
}

Each task is now including a reference to a project. The project entities are consisting of an ID, individual title, and description property...