Crear una clase para los datos en Angular 2

Publicado en May 9, 2016

Estamos definiendo nuestros datos directamente dentro de nuestro componente. Eso está bien para una demostración, pero ciertamente no es una buena práctica. Veamos como crear una clase para los datos en Angular 2. Esto es como un modelo de datos o entidad dentro de Angular.

Nuestro componente app.component.ts, en el array creamos objetos Pelicula:

import {Component} from 'angular2/core';
import {Pelicula} from './model/pelicula';

@Component({
    selector: 'my-app',
    templateUrl: 'app/views/peliculas.html',
})
export class AppComponent {
  titulo = 'Peliculas Angular 2';
  peliculas = [
    new Pelicula(1, 'Batman v. Superman', "Zack Snider", 2016),
    new Pelicula(2, 'La verdad duele', 'Will Smith', 2015),
    new Pelicula(3, 'Una historia real', 'Desconocido', 2014),
  ];
}

Creamos el fichero model/pelicula.ts, definimos la clase y sus propiedades:

export class Pelicula {
  constructor(
    public id:number,
    public pelicula:string,
    public director:string,
    public anio:number) { }
}

Creamos la plantilla views/peliculas.html y recorremos el array de peliculas:

<h1>{{titulo}}</h1>

<h3>Primera pelicula harcodeada:</h3>
<p>Pelicula: {{peliculas[0]["pelicula"]}}</p>
<p>Director: {{peliculas[0]["director"]}}</p>
<p>Año: {{peliculas[0]["anio"]}}</p>

<h3>Listado de peliculas:</h3>
<ul>
    <li *ngFor="#peli of peliculas">
      <p>Titulo: {{peli.pelicula}}</p>
      <p>Director: {{peli.director}}</p>
      <p>Año: {{peli.anio}}</p>
    </li>
</ul>

<hr>
&copy; Copyright 
<a href="http://victorroblesweb.es">http://victorroblesweb.es</a>

Con esto ya sabemos crear una clase para los datos en Angular 2.

Más información:
https://angular.io/docs/ts/latest/guide/displaying-data.html