Componentes en Angular

¿Cómo crear un componente en Angular?

En Angular, uno de los elementos más importantes lo constituyen los Componentes. Una aplicación cuenta con al menos un componente raíz y este conecta todos los otros componentes de forma jerárquica con el DOM de la página.

Un componente se define como una clase que contiene los datos y la lógica de aplicación. Para expresar un componente se emplea el decorador (decorator) @Component encima de la declaración de la clase del componente. Este define sus metadatos, los que describen las partes necesarias para crear el componente y su vista asociada.

 @Component({
    selector: 'app-departamento-lista',
    templateUrl: './departamento-lista.component.html',
    styleUrls: ['./departamento-lista.component.css']
})

Como primer elemento encontramos el selector. Este especifica la etiqueta que usaremos en la plantilla HTML para crear e insertar una instancia del componente. Por ejemplo, sería de la siguiente forma:

 <app-departamento-lista></app-departamento-lista>

Observamos también la propiedad templateUrl. Este asocia el componente con una vista a través de un camino relativo. Además, es posible utilizar la propiedad template en vez de la anterior y situar directamente la plantilla en forma de cadena (template string), por ejemplo:

template: `
     <div>
        <img src="{{imagen}}">
        <span [style.text-decoration]="blue">
            Departamento
        </span>
        <button (click)="eliminar()">Eliminar</button>
      </div>`

A través de la propiedad styleUrls podemos asociar al componente una o varias hojas de estilos CSS, igualmente utilizando un camino relativo a los archivos.

Por último, para expresar la lógica de la aplicación creamos la clase del componente.

export class DepartamentoListaComponent {
    constructor() { }
}

¿Qué es una plantilla de un componente?

Las vistas en una aplicación Angular están organizadas de forma jerárquica, permitiendo ocultar o mostrar secciones a través de los selectores del componente. Para ello, el componente tiene asociado una plantilla, que constituye la vista. Una plantilla constituye la manera de reflejar las propiedades y métodos de la clase del componente sobre la vista. Luce similar al HTML que usamos regularmente incluyendo elementos sintácticos de una plantilla de Angular, como mostramos a continuación:Las vistas en una aplicación Angular están organizadas de forma jerárquica, permitiendo ocultar o mostrar secciones a través de los selectores del componente. Para ello, el componente tiene asociado una plantilla, que constituye la vista. Una plantilla constituye la manera de reflejar las propiedades y métodos de la clase del componente sobre la vista. Luce similar al HTML que usamos regularmente incluyendo elementos sintácticos de una plantilla de Angular, como mostramos a continuación:

 <h1>Departamento</h1>
<ul>
    <li *ngFor="let depto of departamentos" (click)="deptoSeleccionar(depto)">
        {{depto.nombre}}
    </li>
</ul>
<app-departamento-form *ngIf="deptoSeleccionado"></app-departamento- form>

Este ejemplo utiliza elementos relacionados con la sintaxis de una plantilla Angular, los cuales abordaremos con mayor profundidad en próximos artículos.

Ejemplo práctico de la creación de un componente en Angular

Para desarrollar este ejemplo retomaremos los comandos utilizados en los artículos anteriores y conoceremos otros.

Primero crearemos un nuevo proyecto UniversidadApp:

Como vimos en el artículo anterior Mi primera aplicación Angular, este comando nos permite crear una aplicación y nos instala los paquetes de npm necesarios para ejecutarla.

Añadiremos un módulo Departamento que contendrá todos los componentes relacionados con este. Primero nos cambiamos a la carpeta raíz del proyecto y luego creamos el módulo.

Al hacer esto introducimos una nueva carpeta modulos dentro de la carpeta app y luego el módulo Departamento. Esto nos permite colocar todos nuestros módulos organizados, pero no es necesario.

Crearemos un componente DepartamentoLista, dentro de una nueva carpeta componentes en el módulo Departamento de la siguiente manera:

Este comando nos agrega una carpeta departamento-lista y cuatro archivos del componente DepartamentoLista.

departamento-lista.component.css

departamento-lista.component.html

departamento-lista.component.spec.ts

departamento-lista.component.ts

Podemos decir que: ni la carpeta componentes, ni modulos son necesarios colocarlos en el camino al generar el módulo o el componente, pero si recomendables para organizar nuestro código.