LoopBack 4 TodoList Application Tutorial - Add TodoList Model

Building a checklist for your Todo models

A todo item is often grouped into a checklist along with other todo items sothat it can be used to measure the progress of a bigger picture.

A data set can often be related to another data set, so that an entity may beable to provide access to another entity based on its relationship with theother entity. To take TodoListApplication one step further and establishrelations with the existing Todo model as real-world applications often tendto do, we’ll introduce the model TodoList.

We’ll create the TodoList model to represent a checklist that containsmultiple Todo items. Let’s define TodoList model with the following properties:

• a unique id
• a title
• a color to represent the TodoList withWe can use the lb4 model command and answer the prompts to generate the modelfor us as follows:

$ lb4 model
? Model class name: TodoList
? Please select the model base class Entity
? Allow additional (free-form) properties? No
Model TodoList will be created in src/models/todo-list.model.ts
Let's add a property to TodoList
Enter an empty property name when done
? Enter the property name: id
? Property type: number
? Is ID field? Yes
? Required?: No
? Default value [leave blank for none]:
Let's add another property to TodoList
Enter an empty property name when done
? Enter the property name: title
? Property type: string
? Required?: Yes
? Default value [leave blank for none]:
Let's add another property to TodoList
Enter an empty property name when done
? Enter the property name: color
? Property type: string
? Required?: No
? Default value [leave blank for none]:
Let's add another property to TodoList
Enter an empty property name when done
? Enter the property name:
   create src/models/todo-list.model.ts
   update src/models/index.ts
Model TodoList was created in src/models/

Now that we have our new model, we need to define its relation with the Todomodel. Add the following import statements and property to the TodoList modeland update the TodoListRelations interface to include todos:

src/models/todo-list.model.ts

import {hasMany} from '@loopback/repository';
import {Todo, TodoWithRelations} from './todo.model';
@model()
export class TodoList extends Entity {
  // ...properties defined by the CLI...
  @hasMany(() => Todo)
  todos?: Todo[];
  // ...constructor def...
}
export interface TodoListRelations {
  todos?: TodoWithRelations[];
}
export type TodoListWithRelations = TodoList & TodoListRelations;

The @hasMany() decorator defines this property. As the decorator’s namesuggests, @hasMany() informs LoopBack 4 that a todo list can have many todoitems.

To complement TodoList’s relationship to Todo, we’ll add in the todoListIdproperty on the Todo model to define the relation on both ends, along withupdating the TodoRelations interface to include todoList:

src/models/todo.model.ts

@model()
export class Todo extends Entity {
  // ...properties defined by the CLI...
  @belongsTo(() => TodoList)
  todoListId: number;
  // ...constructor def...
}
export interface TodoRelations {
  todoList?: TodoListWithRelations;
}
export type TodoWithRelations = Todo & TodoRelations;

Once the models have been completely configured, it’s time to move on to addinga repository for TodoList.

Navigation

Introduction: TodoList Tutorial

Next step: Add TodoList repository