Crear un componente nuevo con Angular 2

  • Por
  • y  
En este artículo te vamos a enseñar a crear un nuevo componente con Angular CLI y luego a usarlo en tu aplicación Angular 2.

Después de nuestro repaso teórico a la figura de los componentes en Angular estamos en condiciones de irnos al terreno de lo práctico y ver cómo se generan nuevos componentes en una aplicación.

Si abres el index.html que hay en la carpeta "src" verás como en el body existe un único componente, pero sin embargo, una aplicación de Angular tendrá decenas o cientos de ellos. Los componentes se pueden organizar de diversas maneras y veremos más adelante cuando lleguemos a los módulos, que los podemos crear en el módulo principal de la aplicación o en módulos específicos de una funcionalidad en concreto. De momento vamos a crear un componente en el módulo principal, pues es lo más sencillo para comenzar.

Nota: Además de módulos, recuerda que unos componentes usarán o se apoyarán en otros para resolver sus necesidades, creando una estructura de árbol. Todos los componentes que desarrollemos en adelante estarán de alguna manera dentro del componente raíz. Esto no es nuevo, puesto que ya se comentó en el Manual de Angular, pero está bien recordarlo para que quede claro. Partiremos de esta situación agregando ahora nuevos componentes con los que podremos expandir la aplicación.

Pero, en realidad, nadie te obliga a tener un componente único como raíz. Podrías crear un componente y usarlo directamente en el index.html de tu aplicación. Haciendo esto convenientemente (pues tendrías que agregar ese componente al bootstrap del módulo principal para que funcione) no habría ningún problema por ello. Aunque debido a que ese index.html es código generado y generalmente no lo querremos tocar, será más recomendable crear los componentes debajo del componente raíz.

Creamos un componente a través de Angular CLI

Ya usamos Angular CLI para generar el código de inicio de nuestra aplicación Angular. Ahora vamos a usar esta herramienta de línea de comandos para generar el esqueleto de un componente. Desde la raíz del proyecto lanzamos el siguiente comando:

ng generate component nombre-del-componente
Nota: Existe un alias para la orden "generate" que puedes usar para escribir un poco menos. Sería simplemente escribir "g". Sería algo como ng g component nombre-del-componente

Además de componentes, la orden generate te permite crear el esqueleto de otra serie de artefactos como son directivas, servicios, clases, etc.

Reconociendo los archivos del componente

Si observas ahora la carpeta "src/app" encontrarás que se ha creado un directorio nuevo con el mismo nombre del componente que acabamos de crear. Dentro encuentras una serie de archivos que ya te deben de sonar porque los hemos analizado ya para el componente inicial de las aplicaciones Angular.

Nos referimos a los archivos donde colocas el código (TypeScript) de registro del componente, el CSS para los estilos y el HTML para la vista, más el archivo spec.ts, que sirve para el testing. Tendrás en definitiva algo como puedes ver en la imagen.

Archivos del componente Angular recién creado

Nota: En versiones tempranas de Angular (en esta ocasión nos referimos a Angular 2, al menos en sus primeras releases), existía un archivo llamado "index.ts", que hacía solo tiene un export y servía para importar el componente de manera algo más resumida. En index.ts, se exportaba el propio componente, por su nombre. Servía para que, cuando importas un componente desde otro lugar de tu aplicación, no tengas que referirte al archivo "nombre-del-componente.component.ts" con todas sus letras, sino simplemente a la carpeta donde se encuentra. Ahora en Angular (4) ese archivo no existe.

Componente declarado en el módulo principal

Como hemos dicho, este componente que acabamos de crerar residirá en el módulo principal. En adelante cuando veamos módulos explicaremos cómo hacer que el componente se cree dentro de un módulo, pero por el momento esta es la situación. En dicho módulo principal, archivo app.module.ts, se tiene que declarar el componente que acabamos de crear.

Realmente, al crear el componente mediante el terminal, con los comandos del Angular CLI, las modificaciones en el módulo principal enfocadas a la declaración de este nuevo componente ya están realizadas. No obstante es bueno que le echemos un vistazo para irnos familiarizando.

Si abres el archivo app.module.ts, tendrías que reconocer la declaración en estos bloques de código:

1.- El import del componente

Este import nos trae el código TypeScript del componente que acabas de crear. Fíjate la clase del componente y la ruta donde está el código importado.

import { NombreDelComponenteComponent } from './nombre-del-componente/nombre-del-componente.component';

2.- La declaración "declarations"

En el decorador del módulo principal, en el array de declarations, encontrarás nombrado el componente que acabas de crear.

@NgModule({
  declarations: [
    AppComponent,
    NombreDelComponenteComponent
  ],
  
  [...]
}
Nota: Anteriormente, versiones muy tempranas de Angular 2, se usaba SystemJS para la declaración del componente. Esto no aplica a las versiones actuales de Angular: En todos los lugares donde, en adelante, deseabas usar ese componente, con SystemJS estabas obligado a importarlo para que se conozca su código. Para ello hemos visto que solo se usaba el nombre del componente y no el archivo donde se escribió su clase. Insistimos, eso era antes, cuando para realizar todo lo que es la carga de módulos se utilizaba SystemJS. En aquella época existía un archivo llamado system-config.ts donde se administran todas las librerías que se importaban con SystemJS. En ellas encontrarías la declaración del nuevo componente que acabamos de generar.

Javascript de nuestro componente

El archivo "nombre-del-componente.component.ts" contiene el código Javascript del componente.

Nota: Apreciarás que deberíamos decir que contiene el "código TypeScript del componente", dado que en realidad a día de hoy Angular CLI solo tiene la opción de generar código TypeScript. No debe representar un gran problema para ti, porque realmente todo código Javascript es también código TypeScript, al que se le agregan ciertas cosas, sobre todo para el control de tipos.

Debes reconocer ya diversas partes:

  • Imports de todo aquello que necesitemos. En principio de la librería @angular/core, pero luego veremos que aquí iremos colocando muchos otros imports a medida que vayamos necesitando código de más lugares.
  • Decorador del componente, para su registro.
  • Clase que hace las veces del controlador, que tengo que exportar.

En estas partes ya conocidas no entraremos de momento con más detalles, pues ya los hemos abordado anteriormente en el Manual de Angular. Ahora te pedimos simplemente echar un vistazo a la cabecera de la clase, en concreto a su "implements":

export class NombreDelComponenteComponent implements OnInit {

Ese implements es una interfaz, que no están disponibles todavía en Javascript, ni tan siquiera en ES6, pero que ya son posibles de usar gracias a TypeScript. Es simplemente como un contrato que dice que dentro de la clase del componente vamos a definir la funcion ngOnInit(). Sobre esa función no hablaremos mucho todavía, pero es un lugar donde podremos colocar código a ejecutar cuando se tenga la certeza que el componente ha sido inicializado ya.

Solo a modo de prueba, vamos a crear una propiedad llamada "dato" dentro de nuestro componente recién creado. El código nos quedará algo como esto:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nombre-del-componente',
  templateUrl: 'nombre-del-componente.component.html',
  styleUrls: ['nombre-del-componente.component.css']
})
export class NombreDelComponenteComponent implements OnInit {

  dato = "Creando componentes para DesarrolloWeb.com";
  
  constructor() {}

  ngOnInit() {
    console.log('componente inicializado...');
  }

}

HTML del componente

El componente que acabamos de crear tiene un HTML de prueba, ya escrito en el archivo "nombre-del-componente.component.html".

Podemos agregarle la expresión para que se vea en el componente la propiedad que hemos generado del lado de Javascript, en la clase del componente. Tendrías algo como esto:

<p>
  nombre-del-componente works!
</p>
<p>
  {{ dato }}
</p>

Puedes abrir ese HTML y colocar cualquier cosa que consideres, simplemente a modo de prueba, para comprobar que consigues ver ese texto ahora cuando usemos el componente.

Nota: No hemos entrado todavía, pero seguro que alguno ya se lo pregunta o quiere saberlo. El componente tiene un archivo CSS (aunque se pueden definir varios en el decorador del componente) y podemos editarlo para colocar cualquier declaración de estilos. Veremos más adelante, o podrás comprobar por ti mismo, que esos estilos CSS se aplican únicamente al componente donde estás trabajando y no a otros componentes de la aplicación.

Con esto hemos terminado de explicar todo lo relativo a la creación de un componente. El componente está ahí y estamos seguros que estarás ansioso por usarlo en tu proyecto. Es algo que veremos ya mismo, en el próximo artículo del Manual de Angular 2.

Autor

Alberto Basalo

Alberto Basalo es experto en Angular y otras tecnologías basadas en Javascript, como NodeJS y MongoDB. Es director de Ágora Binaria, empresa dedicada al desarrollo de aplicaciones y a la formación a través de Academia Binaria.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Hans

28/8/2016
Como se usa el componente?
Hola amigo... quisiera saber como se utiliza ese componente que creamos.... Saluds.!!

garraxxi

21/9/2016
system-config.ts
Dónde puedo encotrar el archivo system-config.ts???

Dardo Arevalo

16/3/2017
archivo index.ts
hola, no encuentro el archivo index.ts. El mismo es creado automáticamente cuando generamos el nuevo componente o lo tenemos que crear manualmente. En la carpeta app no se encuentra.