En Angular2 los componentes son simples clases de typescript , para este ejemplo utilizo angular-seed2, del cual hable en el post anterior, para instalarlo seguir los siguientes solo basta con descargarlo y desde nuestra terminal acceder al directorio, instalar los paquetes y dependencias.

npm install -g webpack webpack-dev-server typings typescript
run npm install
run npm start

Ahora ya con el webserver corriendo y el compilador de typescript a la escucha podemos crear nuestro nuevo componente, en el directorio de angular-seed, vamos a src/components/ y creamos un archivo peppapig.component.ts este será nuestro componente y escribimos lo siguiente:

export class PeppaPigComponent{

}

Que significa export ? 

En Typescript cada archivo es considerado un módulo y puede exponer variables, funciones o clases, por tanto con export hacemos que esta clase sea disponible para otros módulos de nuestra aplicación.

Como angular2 sabe que es un Component ?

Angular2 detecta a partir de atributos en la clase (decorators) para saber que es un componente primero debemos importar los atributos de componente para nuestra clase.

En angular2/core tenemos un tenemos un atributo llamado component que es expuesto para ser consumido, este atributo es una función por tanto lo podemos llamarla y a su vez este acepta un object como parámetros.

En este object diferentes propiedades donde asignaremos la propiedad selector el cual especifica el elemento que almacena nuestro componente en el DOM y template este define el template que se muestra en el DOM.

import {Component} from ‘angular2/core’

@Component({
selector: ‘peppapig’,
template: ‘h1>Hola Soy Peppa Pig/h1>’
})

Como integro mi component en mi App ?

Para integrar nuestro componente en la app abrimos el archivo src/seed-app.ts, si nos fijamos en seed-app.ts es otro componente  y este  realiza un import de {Component} desde angular2/core y llama Component y tiene un object definiendo el selector y el template, por tanto es un componente en sí.

Importamos nuestro componente y agregamos al atributo @Component la propiedad directives, la cual acepta un array, dentro de este array especificamos todas las directivas que utilizara nuestro component.

Que es una Directive?
En palabras simples es una clase que nos permite extender o controlar el DOM, pero no elementos estándares de DOM ejemplo <peppapig> por tanto agregaremos nuestro componente como una directiva.

import {PeppaPigComponent} from ‘./components/peppapig.component’;

@Component({
 selector: ‘seed-app’,
 providers: [],
 pipes: [],
 directives: [ROUTER_DIRECTIVES,PeppaPigComponent],
 templateUrl: ‘app/seed-app.html’,
})

Ahora guardamos los cambios y vemos como typescript detecta los cambios y si vamos a http://localhost:3000 y podemos ver nuestro component.

component

Si quieres descargar el ejemplo https://github.com/danywalls/ejemplos-con-angular2.

Happy Angular!