Mostrar propiedades de un componente en Angular 2

Publicado en Abr 18, 2016

Como sabemos en Angular 2 trabajamos principalmente con componentes, los cuales controlan el trabajo con los eventos, etc, estan formados por una clase con propiedades, métodos y además podemos invocar decoradores para definir el propio componente e indicarle en que etiqueta mostrar el componente y que plantilla o vista va a tener el mismo.

Veamos como mostrar las propiedades de un componente en Angular 2.

Tenemos el componente principal app.component.ts

// Importamos el objeto component
import {Component} from 'angular2/core';

/* Decorador component indicamos el selector donde cargar la 
plantilla y definimos el html de la plantilla. Utilizamos las 
dobles llaves para mostrar el valor de las propiedades o 
atributos de la clase AppComponent */
@Component({
    selector: 'my-app',
    template: '<h1>Peliculas en Angular 2:</h1>'+
    '<p>Pelicula: {{pelicula}}</p>'+
    '<p>Director: {{director}}</p>'+
    '<p>Año: {{anio}}</p>',
})

/* Exportamos la clase para que el componente este disponible */
export class AppComponent {

// Definimos las propiedades y su tipo
  pelicula: string;
  director: string;
  anio: number;

/* Cuando se cree el objeto del componente se llamará al constructor 
y se le dará un valor a los atributos */
  constructor() {
    this.pelicula = 'Batman v. Superman';
    this.director = 'Zack Snider';
    this.anio = 2016;
  }
}

Esto es todo 😉

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