Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lernen Service Injection into a Component | Services and Dependency Injection in Angular
Introduction to Angular
course content

Kursinhalt

Introduction to Angular

Introduction to Angular

1. Angular Fundamentals
What is Angular?The Evolution and Stability of Angular Key Principles of the FrameworkSetting Up the EnvironmentGetting Started with Angular CLIAngular Project Structure
2. Components and Templates
What Is a Component?The Main Component in AngularCreating a ComponentTypes of Data Binding in AngularComponent and Template Interaction in AngularCommunication Between Components in Angular
3. Mastering Angular Directives and Pipes
Introduction to Directives in AngularStructural Directives in AngularAttribute Directives in AngularCreating Custom Directives in AngularIntroduction to PipesCreating a Custom Pipe in Angular
4. Services and Dependency Injection in Angular
Introduction to Angular ServicesCreating a Custom Service in AngularService Injection into a ComponentAdding Functionality to Our ApplicationSaving Data to Local Storage in Angular
5. Standalone Components & Modules
Introduction to Modules in AngularModular Architecture in AngularTransition to Standalone ComponentsHow Standalone Components Work in Angular
6. Routing and Navigation in Angular
Routing Basics in AngularImplementing the TaskDetailsComponentSetting Up Routing in AngularComponent Communication and NavigationHandling Non-Existent Routes in Angular

book
Service Injection into a Component

You created the TaskService, which handles storing and managing the task list. However, the service by itself doesn't interact with the user interface. To get the data from the service into the component's template, you need to inject the service into the corresponding component.

Now, you'll see how Angular automatically helps connect services to components using Dependency Injection (DI) and how the service works inside the component.

What is Dependency Injection?

Note
Definition

Dependency Injection (DI) is a design pattern where Angular automatically injects the required dependencies (like services) into a component's constructor.

Thanks to DI, components don't create service instances themselves — they simply receive an already created instance. Angular handles delivering the needed objects to whoever requires them.

This works because the service is decorated with:

ts

This decorator tells Angular to create a single instance (singleton) of the service for the entire app and make it available for DI.

Injecting the Service into a Component

Now, let's inject the TaskService into the TaskListComponent so it can get the task list and interact with it.

Here's what the component code looks like:

ts

task-list

copy

              
1234567891011121314151617181920212223

            
@Component({
  selector: 'app-task-list',
  imports: [TaskComponent, CommonModule],
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  tasks: Task[] = [];

  constructor(private taskService: TaskService) {
    this.tasks = this.taskService.getTasks();
  }

  deleteTask(id: number) {
    this.taskService.deleteTask(id);
    this.tasks = this.taskService.getTasks();
  }

  toggleStatus(id: number) {
    this.taskService.toggleTaskStatus(id);
    this.tasks = this.taskService.getTasks();
  }
}

We import the TaskService, the Task interface, and other components and modules needed for the template.

In the component constructor, we add the service via Dependency Injection:

ts

task-list

copy

              
123

            
constructor(private taskService: TaskService) {
   this.tasks = this.taskService.getTasks();
}

Angular automatically injects the needed service instance here. We store it as a private field to use in component methods.

Right after the component is created (inside the constructor), we get the task list. This list is then used in the HTML template.

The methods deleteTask and toggleStatus call the service's functions to delete a task or toggle its status, then update the local tasks array so the UI reflects the changes.

This approach keeps the component simple: it doesn't know how the data is stored or handled — it just asks the service to update it. This separates concerns: components handle the view, and services handle the data.

1. What is Dependency Injection (DI) in Angular?

2. Why do we update this.tasks after calling deleteTask or toggleStatus?

question mark

What is Dependency Injection (DI) in Angular?

Select the correct answer

question mark

Why do we update this.tasks after calling deleteTask or toggleStatus?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3

Fragen Sie AI

expand
ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

course content

Kursinhalt

Introduction to Angular

Introduction to Angular

1. Angular Fundamentals
What is Angular?The Evolution and Stability of Angular Key Principles of the FrameworkSetting Up the EnvironmentGetting Started with Angular CLIAngular Project Structure
2. Components and Templates
What Is a Component?The Main Component in AngularCreating a ComponentTypes of Data Binding in AngularComponent and Template Interaction in AngularCommunication Between Components in Angular
3. Mastering Angular Directives and Pipes
Introduction to Directives in AngularStructural Directives in AngularAttribute Directives in AngularCreating Custom Directives in AngularIntroduction to PipesCreating a Custom Pipe in Angular
4. Services and Dependency Injection in Angular
Introduction to Angular ServicesCreating a Custom Service in AngularService Injection into a ComponentAdding Functionality to Our ApplicationSaving Data to Local Storage in Angular
5. Standalone Components & Modules
Introduction to Modules in AngularModular Architecture in AngularTransition to Standalone ComponentsHow Standalone Components Work in Angular
6. Routing and Navigation in Angular
Routing Basics in AngularImplementing the TaskDetailsComponentSetting Up Routing in AngularComponent Communication and NavigationHandling Non-Existent Routes in Angular

book
Service Injection into a Component

You created the TaskService, which handles storing and managing the task list. However, the service by itself doesn't interact with the user interface. To get the data from the service into the component's template, you need to inject the service into the corresponding component.

Now, you'll see how Angular automatically helps connect services to components using Dependency Injection (DI) and how the service works inside the component.

What is Dependency Injection?

Note
Definition

Dependency Injection (DI) is a design pattern where Angular automatically injects the required dependencies (like services) into a component's constructor.

Thanks to DI, components don't create service instances themselves — they simply receive an already created instance. Angular handles delivering the needed objects to whoever requires them.

This works because the service is decorated with:

ts

This decorator tells Angular to create a single instance (singleton) of the service for the entire app and make it available for DI.

Injecting the Service into a Component

Now, let's inject the TaskService into the TaskListComponent so it can get the task list and interact with it.

Here's what the component code looks like:

ts

task-list

copy

              
1234567891011121314151617181920212223

            
@Component({
  selector: 'app-task-list',
  imports: [TaskComponent, CommonModule],
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent {
  tasks: Task[] = [];

  constructor(private taskService: TaskService) {
    this.tasks = this.taskService.getTasks();
  }

  deleteTask(id: number) {
    this.taskService.deleteTask(id);
    this.tasks = this.taskService.getTasks();
  }

  toggleStatus(id: number) {
    this.taskService.toggleTaskStatus(id);
    this.tasks = this.taskService.getTasks();
  }
}

We import the TaskService, the Task interface, and other components and modules needed for the template.

In the component constructor, we add the service via Dependency Injection:

ts

task-list

copy

              
123

            
constructor(private taskService: TaskService) {
   this.tasks = this.taskService.getTasks();
}

Angular automatically injects the needed service instance here. We store it as a private field to use in component methods.

Right after the component is created (inside the constructor), we get the task list. This list is then used in the HTML template.

The methods deleteTask and toggleStatus call the service's functions to delete a task or toggle its status, then update the local tasks array so the UI reflects the changes.

This approach keeps the component simple: it doesn't know how the data is stored or handled — it just asks the service to update it. This separates concerns: components handle the view, and services handle the data.

1. What is Dependency Injection (DI) in Angular?

2. Why do we update this.tasks after calling deleteTask or toggleStatus?

question mark

What is Dependency Injection (DI) in Angular?

Select the correct answer

question mark

Why do we update this.tasks after calling deleteTask or toggleStatus?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 3
Wir sind enttäuscht, dass etwas schief gelaufen ist. Was ist passiert?
some-alt