Componentes en Angular

Componentes en Angular

componentes-angular-devsun-blog

En el artículo de hoy, nuestro equipo de DevSun Europe explica que es un componente (component) en Angular. Para ello analizamos en qué consiste y como crear un componente a través de la interfaz de línea de comando. Detallamos cómo crear una plantilla asociada al mismo y desarrollamos un breve ejemplo para agrupar todos los conceptos vistos.

¿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() { }
}
Angular
Foto de Dribble por: Maggie Appleton

¿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:

ng new 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.

cd ./UniversidadApp
ng g module modulos/Departamento

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:

ng g component modulos/departamentos/componentes/DepartamentoLista

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.

Con esto hemos podido aprender, los conceptos generales de un componente Angular. Hemos desarrollado un sencillo ejemplo de un componente, mostrando como crearlo según las necesidades de la aplicación. Todo esto nos permite ser capaces de introducir componentes propios, adaptados a la lógica de la aplicación. En los próximos artículos abordaremos más detalles sobre componentes y cómo personalizarlos.


Total de Vistas: 123

Publicaciones relacionadas

Like
Like Love Haha Wow Sad Angry
32

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Publicación recomendada
Scroll Up