Angular Services

---

Motivation

🤮

---

Service

• kein UI
• übernimmt eine Zuständigkeit
  • Datenhaltung
  • Abrufen externen Daten
  • ...

---

Service

@Injectable({
  providedIn: 'root'
})
export class SomeService {
  // logic
}

@Component({ ... })
export class SomeComponent {
  service = inject(SomeService);
}

• Instanzierung durch Angular
• einmalig (Singleton)

---

Datenhaltung

export class BasketService {
  basket = signal<Product[]>([]);
}

export class ItemComponent {
  product = input.required<Product>();
  service = inject(BasketService);
  
  addToBasket() {
    this.service.basket.update(s => [...s, this.product()]);
  }
}

export class BasketComponent {
  service = inject(BasketService);
  basket = this.service.basket();
}

---

Best Practice

export class BasketService {
  private _basket = signal<Product[]>([]);
  readonly basket = this._basket.asReadonly();

  addToBasket(product: Product) {
    this._basket.set([...this._basket(), product]);
  }

export class ItemComponent {
  product = input.required<Product>();
  service = inject(BasketService);
  
  addToBasket() {
    this.service.addToBasket(this.product);  
  }

export class BasketComponent {
  service = inject(BasketService);
  basket = computed<Product[]>(this.service.basket);

---

computed

count = signal(2);
doubleCount = computed(() => count() * 2); // 4
count.set(3) // count = 4, doubleCount = 6

• entstehen aus existierenden Signals
• read-only

doubleCount.set(42); 🚫

computed(() => a() + b());

• updated, wenn a oder b updaten
• lazy evaluated
• gecached