Plantillas en linea o plantillas en fichero en Angular 2

Publicado en May 2, 2016

En Angular2 podemos indicarle a nuestro componente que va a tener una plantilla asociada de dos formas.
Una forma seria definiendola en linea usando la propiedad template. O podemos definirla en un archivo HTML separado y diciéndole la ruta del mismo usando la propiedad templateUrl del decorador @Component
Esta forma de trabajar es recomendable si la plantilla va a ser muy grande.

Veamos como utilizar plantillas en fichero en Angular2.

El componente: app.component.ts

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    templateUrl: 'app/templates/peliculas.html',
})
export class AppComponent {
    peliculas = [
        {
            "pelicula": "Batman v. Superman",
            "director": "Zack Snider",
            "anio": "2016"
        },
        {
            "pelicula": "La verdad duele",
            "director": "Will Smith",
            "anio": "2015"
        },
        {
            "pelicula": "Una historia real",
            "director": "Desconocido",
            "anio": "2014"
        }];
}

La plantilla: app/templates/peliculas.html

<h1>Peliculas en Angular 2:</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>
<a href="http://victorroblesweb.es">http://victorroblesweb.es</a>

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