Implement Components

Home Component

// src/app/home/home.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<h1>Welcome to the Home Page</h1>`
})
export class HomeComponent { }

About Component

// src/app/about/about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: `<h1>About Us</h1><p>This is the about page.</p>`
})
export class AboutComponent { }

User Component

// src/app/user/user.component.ts
import { Component, OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',
  template: `
    <h1>User List</h1>
    <ul>
      <li *ngFor="let user of users">
        {{ user.name }} ({{ user.email }})
      </li>
    </ul>
  `
})
export class UserComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) { }

  ngOnInit(): void {
    this.userService.getUsers().subscribe(data => {
      this.users = data;
    });
  }
}