Angular 2 - 2) Primer componente

Objetivo:

• Crear el primer component
• Utilizar ngIf y ngFor

1. Crear un nuevo componente llamado users utilizando el proyecto que se creó anteriormente. Para eso abrir una consola y nos posicionamos en el proyecto que creamos anteriormente y ejecutamos:

ng generate component users

Ver este link: https://github.com/angular/angular-cli/wiki/generate

La salida de consola debería ser algo parecido a esto:

2. Abrir el archivo llamado users.component.ts y agregar información de los usuarios que vamos a lista. El componente debería quedar de la siguiente manera:  

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-users',

templateUrl: './users.component.html',

styleUrls: ['./users.component.css']

})

export class UsersComponent implements OnInit {

message:string;

users: Array<any>;

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"}

  ]

}

}

3. Abrir el archivo llamado users.component.html y actualizar con la siguiente información:

<header>

    Mi Angular One Framework!

</header>

<main>

<div>

    <h1>{{message}}</h1>

</div>

<div *ngIf="users">

  <div *ngFor="let u of users">

      {{u.name}} {{u.username}}

  </div>

</div>

</main>

4. Abrir el archivo llamado app.component.html y agregar el selector de usuario que se creó en el paso anterior:

<app-users></app-users>

5. Abrir una consola o terminal en la raíz del proyecto  y ejecutar el comando ng serve. La salida debería ser parecida a esto:

Repositorio en GitHub