Enhance the UserComponent
to allow for two-way data binding and interaction with the form:
// 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>
<a routerLink="/add-user">Add New User</a>
`
})
export class UserComponent implements OnInit {
users: any[] = [];
constructor(private userService: UserService) { }
ngOnInit(): void {
this.userService.getUsers().subscribe(data => {
this.users = data;
});
}
}
Leave a Reply