Introducción a Angular 2 componentes

Un componente es un bloque de creación principal de una aplicación Angular 2, y una aplicación puede tener cualquier número de componentes. Podemos considerar un componente como una vista particular de la aplicación con su propia lógica y datos.

En AngularJS 1.0, existía el concepto de controladores, $Scope y directivas para vincular datos y lógica a la vista o crear elementos personalizados en la vista. En Angular 2, los componentes realizan todas las tareas que realizaban los controladores, ámbitos y directivas. Los datos, la lógica y los elementos personalizados pueden crearse o añadirse a la página usando componentes en Angular 2.

Angular dos aplicaciones están construidas alrededor de componentes, y podemos considerar component como una visión propia:

• Plantilla
• Application Data
• Logic
• Estilos y más

Vamos a crear nuestro primer componente

Empecemos creando un componente muy sencillo para mostrar "Hola Mundo" en la página.

appcomponent.component.ts

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

@Component({ 
    selector: 'app-container',
    template: `<h1>{{message}}</h1>`
})
export class AppComponent {
  
    message : string = "Hello World";
    constructor() {
    }
}

Principalmente hay tres pasos para crear un componente

1. Cree una clase y expórtela. Esta clase contendrá datos y la lógica.
2. Decora la clase con metadatos @component. Básicamente, los metadatos describen el componente y establecen el valor para diferentes propiedades, de modo que una clase TypeScript pueda usarse como componente Angular 2.
3. Importe las bibliotecas y los módulos necesarios para crear el componente.

Tres pasos discutidos anteriormente pueden visualizarse en el diagrama siguiente:

Como puedes ver, el componente Angular 2 consiste en:

1. Una clase TypeScript para almacenar datos y la lógica;
2. Plantilla HTML y estilos para mostrar datos en la app. También se llama vista, que es vista por el usuario en pantalla para interactuar.
3. Metadatos que definen el comportamiento de un componente. Los metadatos de componentes se aplican a la clase usando el decorador @Component. Se puede pasar diferente comportamiento del componente como propiedades del objeto, que es un parámetro de entrada del decorador @Component.

Ahora, exploremos en detalle estas tres partes de Angular dos componentes.

TypeScript Class in a Component

Una clase TypeScript es un tipo y contiene un componente

• data
• Logic
• Comportamiento

Se puede crear una clase TypeScript usada para crear un CalculatorComponent como se muestra en la siguiente lista:

export class CalculatorComponent{
    num1: number ;
    num2 : number;
    result : number;
    add():number{
        this.result = this.num1 + this.num2;
        return this.result;
    };
    sub():number {
        this.result = this.num1 - this.num2;
        return this.result;
    }
}

Los usuarios pueden leer, modificar y llamar al comportamiento de la clase componente usando diferentes tipos de enlaces:

1. Interpolación
2. Vinculación de propiedad
3. Enlace de eventos
4. Two-way binding

@Component Decorator 

El decorador @Component de TypeScript decora una clase de TypeScript como un componente. Es una función que toma un objeto como parámetro. En el decorador @Component, podemos establecer los valores de diferentes propiedades para establecer el comportamiento del componente. Las propiedades más utilizadas son las siguientes:

• Plantilla
• TemplateUrl
• Directivas
• Proveedores
• Estilos
• StyleUrls
• Tubería
• Selector etc.

Además de las propiedades mencionadas, hay otras propiedades también. Ahora veamos estas propiedades importantes una por una.

Plantilla y TemplateUrl

Una plantilla es la parte del componente que se renderiza en la página. Podemos crear una plantilla de dos formas posibles:

1. Plantilla en línea
2. Plantilla en un archivo externo

Se puede crear una plantilla en línea como se muestra a continuación:

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styles:["h1{color:red}"]

})

Un punto importante que merece la pena destacar aquí es el símbolo de inclinación que se usa para crear varias líneas en la plantilla. Una plantilla en línea de una sola línea puede crearse usando comillas simples o dobles.

Coincidimos en que la vista compleja debería colocarse en un archivo HTML externo en lugar de en una plantilla en línea. Angular 2 permite poner la plantilla en un archivo HTML externo, que puede enlazarse al componente estableciendo el valor de la propiedad templateUrl. Por convención, es mejor mantener la plantilla y el componente en la misma carpeta.

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    templateUrl: '/app/calculators/calculator.component.html',
    styles:["h1{color:red}"]
})

Podemos evitar dar el camino completo estableciendo la propiedad moduleId del componente.

Selector

Un componente puede usarse usando el selector. En el ejemplo anterior, la propiedad selector está configurada como < app-container>. Podemos usar el componente en la página o diferentes vistas usando.

Estilos y StyleUrls

Un componente puede tener sus propios estilos o puede referirse a otras hojas de estilo externas. Para trabajar con estilos, @Component metadatos tiene propiedades styleUrls. Podemos crear estilos en línea estableciendo el valor de la propiedad de estilos como se muestra en el listado a continuación:

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styles:["h1{color:red}"],

})

Un componente puede referirse a varios archivos externos estableciendo el valor de la propiedad styleUrls.

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    styleUrls:['app.component.css','./app/productorder.css']

})

Proveedores

En una aplicación real, el componente utilizará varios Angular 2 Servicios o servicios personalizados. Para usar un servicio en un componente, necesitamos seguir dos pasos:

1. Importar el servicio en el componente, y
2. Establece el valor de la propiedad del proveedor en los metadatos.

Los metadatos de componentes tienen una propiedad de tipo array llamada proveedor. En los proveedores pasamos una lista de servicios que se utilizan en el componente.  Por ejemplo, en el siguiente listado, estamos pasando dos servicios en el componente: CalService y InvoiceService.

@Component({ 
    moduleId: module.id ,
    selector: "app-container",
    template:`
    <h1>{{ message}}</h1>
   `,
    providers:['CalService','InvoiceService']

})

Para usar cualquier servicio proporcionado por Angular2 o servicio personalizado, necesitamos importar estos servicios y pasar como valores de proveedores en los metadatos.

Componentes anidados como directivas

Angular 2 nos permite usar un componente dentro de otro componente. Cuando usamos un componente dentro de otro componente, nos trae el concepto de componentes anidados. Para usar un componente anidado, necesitamos usar la propiedad directiva de los metadatos de componentes.

Veamos, ¿cómo podríamos usar un componente anidado en acción? Supongamos que tenemos un componente llamado TasksComponent y queremos usar este componente dentro de AppComponent.  Los pasos para usar TasksComponent (componente hijo) como componente anidado de AppComponent (componente padre) son los siguientes

1. Importar el componente hijo en el componente padre
2. Usa el componente hijo usando su selector en la plantilla del componente padre
3. Establecer valor de la propiedad directiva del componente padre al componente hijo

Como probablemente hayas notado en la lista de abajo, estamos importando el TaskComponent, que es un componente hijo, y luego usándolo como directiva en el AppComponent. Para usar un componente como componente anidado, debemos establecer el valor de la propiedad directiva.

import { Component } from '@angular/core';
import {TasksComponent} from './task/tasks.component';

@Component({ 
    selector: 'app-container',
    template: `{{message}}<tasks></tasks>`,
    directives:[TasksComponent]
})

Podría haber un escenario en el que necesitemos pasar datos del componente padre al componente hijo y viceversa, pero lo trataremos en detalle en futuras entradas del blog.

Así que ahí lo tienes: podemos usar un componente como componente hijo o bootstrap. Espero que esta entrada introductoria sobre Angular 2 componentes te resulte útil, ¡y gracias por leer!