Angular 2 - 3) Evento Clicks

Objetivo:

• Evento clicks

1. 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>

2. 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;

}

}

3. 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>

4. 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>

5. Abrir una consola y posicionarse en la raíz del proyecto y ejecutar ng serve

Repositorio en GitHub