Objetivo:
- Evento clicks
- Abrir el archivo users.component.html y actualizar el div donde muestra el listado de usuario, ya que ahora va a ser un elemento ul
<header>
Mi Angular One Framework!
</header>
<main>
<div>
<h1>{{message}}</h1>
</div>
<div *ngIf="users">
<ul>
<li *ngFor="let u of users">
{{u.name}} {{u.username}}
</li>
</ul>
</div>
</main>
- Abrir el archivo users.component.ts and agregar un atributo público y un método para manejar el evento clicks:
export class UsersComponent implements OnInit {
message:string;
users: Array<any>;
activeUser;
constructor() { }
ngOnInit() {
this.message = "Bienvenidos";
this.users = [
{id: "25", name: "Leo", username:"Leonel"},
{id: "26", name: "Diego", username:"Diegote"},
{id: "27", name: "Martin", username:"tincho"}
];
}
selectUser(user) {
this.activeUser = user;
}
}
- Abrir el archivo users.component.html y actualizar el ul con la información del usuario de la siguiente manera:
<ul>
<li *ngFor="let u of users" (click)="selectUser(u)">
{{u.name}} {{u.username}}
</li>
</ul>
- Abrir el archivo user.component.html y actualizar la información de como se muestra el usuario seleccionado:
<header>
Mi Angular One Framework!
</header>
<main>
<div>
<h1>{{message}}</h1>
</div>
<div *ngIf="users">
<ul>
<li *ngFor="let u of users" (click)="selectUser(u)">
{{u.name}} {{u.username}}
</li>
</ul>
</div>
<div>
<div *ngIf="activeUser">
<h2>{{activeUser.name}} <small>{{activeUser.username}}</small></h2>
</div>
<div *ngIf="!activeUser">
<h2>Choose a User</h2>
</div>
</div>
</main>
- Abrir una consola y posicionarse en la raíz del proyecto y ejecutar ng serve
