Videotutorial 20

Mejorar los Componentes con Pipes y Directives

En los próximos videotutoriales desarrollaremos un proyecto que nos permita ver como podemos mejorar la salida de nuestros componentes personalizados Angular 2 por medio de pipes y directivas personalizadas.

Instalación

Clonar el repositorio the repository, moverse al directorio que contiene el archivo fuente e instalar las dependencias NPM ejecutando:

$ git clone https://github.com/0utKast/vt20ca2Completo.git
$ cd vt20ca2Completo
$ npm install

Un hook npm postinstall manejará la instalación de los typings requeridos para compilar el proyecto. Podemos ejecutar npm start una vez finalizado para que se lleve a cabo la transpilación TypeScript y active un servidor local en tu ordenador apuntando ya al directorio del proyecto.

Temas cubierto

Veremos el proceso de creación de plantillas complejas, bien inline o dentro de archivos view. Para hacerlo crearemos un nuevo componente desde cero. Veremos como se maneja el enlace de propiedades comparado con el enlace de atributos tradicional en JavaScript. Mejoraremos nuestro componente mediante el uso de Pipes y directivas integradas.

Habilidades aprendidas

• Usar almacenamiento de datos con nuestros componentes
• Pipes integradas.
• Directivas integradas.
• Directivas personalizadas.