Summary
Demonstrates how to use dependency injection to provide a singleton service to a component, enabling separation of data management and view logic by having the component call service methods to retrieve and update data.

General domain of usage
Task management application (to-do list) in a web frontend.

Sie haben den `TaskService` erstellt, der das Speichern und Verwalten der Aufgabenliste übernimmt. Der Service selbst interagiert jedoch nicht mit der Benutzeroberfläche. Um die Daten aus dem Service in das Template der Komponente zu bringen, muss der Service in die entsprechende Komponente injiziert werden.

Im Folgenden erfahren Sie, wie Angular mithilfe der **Dependency Injection (DI)** automatisch Services mit Komponenten verbindet und wie der Service innerhalb der Komponente funktioniert.

**Dependency Injection (DI)** ist ein Entwurfsmuster, bei dem Angular die benötigten Abhängigkeiten (wie Services) automatisch in den Konstruktor einer Komponente einfügt.

Definition

Dank **DI** erstellen Komponenten die Service-Instanzen nicht selbst – sie erhalten einfach eine bereits erstellte Instanz. Angular übernimmt die Bereitstellung der benötigten Objekte für alle, die sie benötigen.

Dies funktioniert, weil der Service wie folgt dekoriert ist:

```ts
@Injectable({
  providedIn: 'root'
})
```

Dieser Decorator weist Angular an, eine einzelne Instanz (Singleton) des Dienstes für die gesamte Anwendung zu erstellen und sie für **DI** verfügbar zu machen.

# Dienst in eine Komponente injizieren

Nun wird der `TaskService` in die `TaskListComponent` injiziert, damit diese auf die Aufgabenliste zugreifen und mit ihr interagieren kann.

So sieht der Code der Komponente aus:

aW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7CmltcG9ydCB7IFRhc2tDb21wb25lbnQgfSBmcm9tICcuLi90YXNrL3Rhc2suY29tcG9uZW50JzsKaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJzsKaW1wb3J0IHsgVGFzaywgVGFza1NlcnZpY2UgfSBmcm9tICcuLi9zZXJ2aWNlcy90YXNrLnNlcnZpY2UnOwoKQENvbXBvbmVudCh7CiAgc2VsZWN0b3I6ICdhcHAtdGFzay1saXN0JywKICBpbXBvcnRzOiBbVGFza0NvbXBvbmVudCwgQ29tbW9uTW9kdWxlXSwKICB0ZW1wbGF0ZVVybDogJy4vdGFzay1saXN0LmNvbXBvbmVudC5odG1sJywKICBzdHlsZVVybHM6IFsnLi90YXNrLWxpc3QuY29tcG9uZW50LmNzcyddCn0pCmV4cG9ydCBjbGFzcyBUYXNrTGlzdENvbXBvbmVudCB7CiAgdGFza3M6IFRhc2tbXSA9IFtdOwoKICBjb25zdHJ1Y3Rvcihwcml2YXRlIHRhc2tTZXJ2aWNlOiBUYXNrU2VydmljZSkgewogICAgdGhpcy50YXNrcyA9IHRoaXMudGFza1NlcnZpY2UuZ2V0VGFza3MoKTsKICB9CgogIGRlbGV0ZVRhc2soaWQ6IG51bWJlcikgewogICAgdGhpcy50YXNrU2VydmljZS5kZWxldGVUYXNrKGlkKTsKICAgIHRoaXMudGFza3MgPSB0aGlzLnRhc2tTZXJ2aWNlLmdldFRhc2tzKCk7CiAgfQoKICB0b2dnbGVTdGF0dXMoaWQ6IG51bWJlcikgewogICAgdGhpcy50YXNrU2VydmljZS50b2dnbGVUYXNrU3RhdHVzKGlkKTsKICAgIHRoaXMudGFza3MgPSB0aGlzLnRhc2tTZXJ2aWNlLmdldFRhc2tzKCk7CiAgfQp9

Wir importieren den `TaskService`, das `Task`-Interface sowie weitere für das Template benötigte Komponenten und Module.

Im Konstruktor der Komponente fügen wir den Service mittels **Dependency Injection** hinzu:

Y29uc3RydWN0b3IocHJpdmF0ZSB0YXNrU2VydmljZTogVGFza1NlcnZpY2UpIHsKICAgdGhpcy50YXNrcyA9IHRoaXMudGFza1NlcnZpY2UuZ2V0VGFza3MoKTsKfQ==

Der Service wird als privates Feld gespeichert, um ihn in Methoden der Komponente zu verwenden. Direkt nach der Erstellung der Komponente (im Konstruktor) wird die Aufgabenliste abgerufen. Diese Liste wird anschließend im HTML-Template verwendet.

Die Methoden `deleteTask` und `toggleStatus` rufen die Funktionen des Service auf, um eine Aufgabe zu löschen oder ihren Status umzuschalten, und aktualisieren anschließend das lokale Array `tasks`, sodass die Benutzeroberfläche die Änderungen widerspiegelt.

Dieser Ansatz hält die Komponente einfach: Sie weiß nicht, wie die Daten gespeichert oder verarbeitet werden – sie fordert lediglich den Service auf, sie zu aktualisieren. Dadurch werden Verantwortlichkeiten getrennt: Komponenten kümmern sich um die Ansicht, Services um die Daten.

Was ist Dependency Injection (DI) in Angular?

Warum aktualisieren wir `this.tasks` nach dem Aufruf von `deleteTask` oder `toggleStatus`?

Erfahren Sie, wie moderne Webanwendungen mit Angular, einem der leistungsstärksten Frontend-Frameworks, entwickelt werden. Sie beginnen mit den grundlegenden Konzepten, richten Ihre Entwicklungsumgebung ein und erstellen schrittweise dynamische, interaktive Komponenten. Dabei arbeiten Sie mit Direktiven, Services, Routing und dem neuesten Ansatz mit Standalone Components. Mit jedem Schritt erwerben Sie praktische Fähigkeiten, um Angular-Anwendungen sicher und nach Industriestandards zu entwickeln und zu strukturieren.

Entdecken Sie die Kernkonzepte von Angular und wie dieses Framework die Webentwicklung vereinfacht. Informationen zu den wichtigsten Prinzipien, der Entwicklungsgeschichte und der Einrichtung der erforderlichen Tools für den Einstieg in die Anwendungsentwicklung.

Discover the fundamentals of components and templates in Angular, including how they are created, structured, and interact with each other to build dynamic, data-driven applications.

Dive into Angular's directives and pipes to learn how they make your templates smarter and your data cleaner. Discover how to control DOM behavior with directives and transform displayed data with powerful, built-in or custom pipes.

Learn how to organize and reuse logic in your Angular applications using services. You'll discover how to create services and inject them into components with Angular's built-in Dependency Injection system. This keeps your code clean, modular, and easier to maintain.

Learn how Angular applications used to rely on modules and discover why the framework is now embracing a more flexible approach with Standalone Components. Dive into the structure of NgModules, understand their key elements, and explore when and how to use Standalone Components in modern Angular development.

Learn how Angular handles routing and navigation to build dynamic single-page applications. In this section, you'll discover how to define routes and navigate between views using Angular's built-in tools.

Service-Injektion in eine Komponente

Awesome!

Service-Injektion in eine Komponente