Project 9: Travel Destination Page

Angular Engineer

Builds on these lessons

Component Task

Objective

The modern inject() function pulls a service instance from the injector without needing a constructor parameter — it can be called directly at class property initialization.

You're building a travel destination page.

Task: write a DestinationService with a getDestination() method, and a DestinationComponent that injects it and renders the result in an <h2>.

component.ts

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

@Injectable({ providedIn: 'root' })
export class DestinationService {
  getDestination(): string {
    return 'Kyoto, Japan';
  }
}

@Component({
  selector: 'app-destination',
  standalone: true,
  template: `<h2>{{ destination }}</h2>`
})
export class DestinationComponent {
  private destinationService = inject(DestinationService);
  destination = this.destinationService.getDestination();
}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →