Project 19: Profile Settings Card

Angular Engineer

Builds on these lessons

Component Task

Objective

An Observable from HttpClient only fires the request once .subscribe() is called — typically done in ngOnInit so the component fetches its own data as soon as it's created.

You're building a profile settings card.

Task: write a ProfileComponent that fetches /api/profile in ngOnInit, storing the result in a profile property and rendering its name once loaded.

component.ts

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [CommonModule],
  template: `<p *ngIf="profile">{{ profile.name }}</p>`
})
export class ProfileComponent implements OnInit {
  private http = inject(HttpClient);
  profile: { name: string } | null = null;

  ngOnInit() {
    this.http.get<{ name: string }>('/api/profile').subscribe(data => {
      this.profile = data;
    });
  }
}

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

Compiler Output

🅰️

Compile your component to see the result

← Previous Next →