liveBook · Manning

Injectable decorator

As explained in Pro Angular 16

The injectable decorator is an Angular decorator that marks a class for use as an injectable service.

`@Injectable()` marks an Angular class as intended for use as a service: an object that Angular can create and supply through dependency injection. Import `Injectable` from `@angular/core` and place the decorator immediately above the class. The decorator has no configuration properties. section 18.2.2 section 5.3.2

Marking a class is not the same as registering it. Register the service in an Angular module’s `providers` property so Angular can resolve requests for it. A component requests the service by declaring a constructor parameter of its type; this avoids passing a shared object through templates and input properties. section 18.2.2 section 6.2.1

Share a discount service

Decorate `DiscountService` with `@Injectable()`, register it as a provider, and declare `constructor(public discounter: DiscountService)` in components that need it. Angular supplies the service when it creates those components, so a discount editor and display need not receive the object through input bindings. section 18.2.2

Listing 18.22. Denoting a service and dependency in the repository.model.ts file in the src/app folder
import { Product } from "./product.model";
import { SimpleDataSource } from "./datasource.model";
import { Signal, WritableSignal, signal } from "@angular/core";
import { Injectable } from "@angular/core";

@Injectable()
export class Model {
    //private dataSource: SimpleDataSource;
    private products: WritableSignal<Product[]>;
    private locator = (p: Product, id: number | any) => p.id == id;

    constructor(private dataSource: SimpleDataSource) {
        //this.dataSource = new SimpleDataSource();
        this.products = signal(new Array<Product>());
        this.products.mutate(prods => 
            this.dataSource.getData().forEach(p => prods.push(p)));
    }

    // ...statements omitted for brevity...
}

The repository service is decorated with `@Injectable()` and requests a data-source service through its constructor instead of creating that dependency itself. section 18.3.1

A service can itself depend on another service. Angular inspects its constructor and resolves the resulting dependency chain. Although `@Injectable()` can be omitted when a class has no constructor arguments to resolve, keeping it makes the service’s intended role clear. section 18.3.1 section 18.2.2

How Pro Angular 16 covers it

How deep it goes
Explains placement, optional use without constructor dependencies, provider registration, and constructor-based resolution, without detailing decorator internals.
Examples
Uses a shared discount service, a shopping cart, and a repository dependent on a data source.
What it assumes
Introduces services and dependency injection while using TypeScript classes and constructor parameters in its examples.
What you can do after
Build it from scratch by decorating a service, registering a provider, and requesting the service through a constructor.
How it connects
Connects service classes to dependency injection, constructors, providers, Angular modules, and component input properties.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Pro Angular 16. The section links point to the parts of the book it draws on.