Project 10: Real Estate Card

Angular Engineer

Builds on these lessons

Component Task

Objective

A service provided in 'root' is a singleton — every component that injects it gets the exact same instance, so state on it is naturally shared app-wide.

You're building a real estate listing card.

Task: write a FavoritesService with a count property and an addFavorite() method, and a ListingCardComponent that injects it, increments the count on a button click, and displays the shared total.

component.ts

import { Component, Injectable, inject } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class FavoritesService {
  count = 0;
  addFavorite() {
    this.count++;
  }
}

@Component({
  selector: 'app-listing-card',
  standalone: true,
  template: `
    <button (click)="favorites.addFavorite()">Save</button>
    <p>Total favorites: {{ favorites.count }}</p>
  `
})
export class ListingCardComponent {
  favorites = inject(FavoritesService);
}

* Hint: Correct characters turn green, incorrect ones turn red.

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →