Angular has its own dependency injection framework, and we will see, with an example, how it handles dependency injection.

First, we will create a Todo class under app/todos/todo.ts with properties such as id, description, and isCompleted, as given in the following screenshot:

Then, create a TodoListComponent component and add the property to hold the collection of todo items retrieved from the injected TodoService. The service will be injected into constructor when TodoListComponent is instantiated by the dependency injection framework. You will learn more about services in r 3, Angular Building Blocks - Part 2.

The code is written using Typescript, and when it compiles the code to JavaScript, it includes information about the class metadata, as the class was decorated with @component. This class metadata holds the information about associating the todoService parameter with the TodoService class. This enables the Angular injector to inject the instance of TodoService when it creates a new TodoListComponent.

We don't explicitly call an injector to inject the service in our code. Instead, Angular's automated dependency injection takes care of it. The injector will be called implicitly while Angular instantiates components when it encounters the <todo-list> selector through HTML markups or when navigating to a component via a router.

Now, we will create TodosComponent, which registers TodoService using the providers parameter in the @Component directive. The instance of TodoService is readily available for the injection both in TodosComponent and in all its child s.

import { Component } from '@angular/core';
import { TodoListComponent } from './todo-list.component';
@Component({
  selector: 'my-todos',
  template: '<h2>Todolist</h2><todo-list></todo-list>',
  providers: [TodoService],
  directives: [TodoListComponent]
})
export class TodosComponent { }

Now, let's create the TodoService service that returns the collection of todo items.

In the production TodoList application, the getTodos method in TodoService will make an HTTP request to get the list of todos. For the basics, we are returning the collection of todos from the mock-todos.

Finally, we need to create mock-todos, which holds the collection of todo items, as illustrated in the following screenshot:

This file is used as an in-memory collection to hold the todo items, and it is made available to the components that import this file. This approach is good for the development phase, but this needs to be changed in the production phase to fetch todo items from the remote server.

Run the application by pressing F5 in VS Code, and you will get the output of the Angular TodoList application, as shown in the following screenshot: