Los componentes

1. Una primera definición

El componente es la estructura fundamental de una aplicación Angular. Como podemos encontrar en otros frameworks, o sencillamente con los Web Components, la aplicación se divide en componentes que pueden contener a su vez otros componentes.

Los objetivos principales, que al mismo tiempo son activos, son la reutilización y una descomposición lógica. Supongamos que una aplicación tiene que gestionar una lista de una entidad específica. Tendrá numerosos elementos a visualizar, por medio de una lista, por ejemplo. Por lo tanto, vamos a crear un componente que muestra un único elemento, y va a iterar por él para visualizar todos los elementos.

Por ejemplo, en una página que contiene un encabezado y lista de artículos, se pueden identificar dos componentes: el artículo y el encabezado.

Por lo tanto, la idea es crear estos dos componentes una única vez, y reutilizarlos cuando sea necesario integrarlos.

La estructura de un componente se descompone en varias partes. En primer lugar, está la declaración del mismo. Posteriormente, en esta declaración, el template del componente y su estilo.

A continuación vienen las herramientas proporcionadas por Angular, como los eventos del DOM, la gestión de las animaciones o las nociones específicas de Angular.

Un componente va a pertenecer a un módulo. Por lo tanto, el componente se declarará en el módulo apropiado.

En lo que respecta a la nomenclatura, los desarrolladores de Angular defienden utilizar component como sufijo del nombre. De esta manera tenemos nombres de componentes del tipo:

2. Crear un primer componente

import { Component } from '@angular/core';  
  
@Component({  
    selector: 'app-item',  
    styles:[`div  
    {  
        background:red;  
    }`],  
    template:'<div>Un item </div>'  ...

1. Los inputs de un componente

import { Component, Input } from '@angular/core';  
  
@Component({  
    selector: 'app-todo',  
    templateUrl: './todo.component.html',  
    styleUrls: ['./todo.component.css']  
  
})  
export class TodoComponent {  
    @Input()  
    text: string;  
  
    @Input()  
    isChecked: boolean;  
} 

  <app-todo text="Hacer los cursos" isChecked="true">  
  </app-todo> 

  todoChecked: boolean = true;  
  todoName: string = "Hacer los cursos"; 

  <app-todo [text]="todoName" [isChecked]="todoChecked">  
  </app-todo> 

1. Pasar un dato del padre al hijo con ayudar de un input

Este método es la utilización simple de un input. El componente padre tiene una propiedad que va a transmitir al componente hijo, con ayuda de un input de este componente hijo.

Componente padre

@Component({  
    selector: 'app-parent',  
    template: `<div>  
        el padre tiene:   
        <pre>{{ data | json }}</pre>  
        <hr />  
        <!-- las propiedades del padre se pasan al componente hijo --> 
        <app-children [name]="name" [email]="email"></app-children> 
        </div>`,  
        styles:[`  
       :host{  
            display:inline-block;  
        }  
        hr{  
            width:100px;  
        }`]  
})  
export class ParentComponent {  
    name: string = "Parent";  
    email: string = "padre@angular.com";  
  
    get data(){  
        return { name: this.name, email: this.email };  
    }  
} 

El padre tiene dos propiedades: name y email.

Para una visualización única, un getterdata devuelve un objeto que contiene estas dos propiedades, para que podemos visualizarlas en JSON en una etiqueta pre, con ayuda del pipe json, integrado en Angular....

1. Recuperar una referencia con @ViewChild

El decorador @ViewChild permite referenciar una instancia de un componente declarando una propiedad del tipo del componente hijo y después, decorándola con el decorador @ViewChild. El decorador recibe como argumento un tipo o una cadena de caracteres.

Especificando un tipo, es posible declarar el tipo de componente que queremos referenciar:

@ViewChild(ChildComponent)  
childrenComponent: ChildComponent; 

Especificando una cadena de caracteres, vamos a recuperar el componente (o el elemento, la directiva, etc.) que se referencia como variable local, con la clave correspondiente. A nivel del TypeScript tenemos:

@ViewChild('refChildren')  
childComponent: ChildComponent; 

Después, en el lado del template HTML:

 <app-children #refChildren></app-children> 

Vamos a poder llamar a los métodos del componente hijo o acceder a sus atributos, porque el componente padre tiene una referencia al componente hijo, mediante la propiedad childComponent.

Tomemos un ejemplo completo. A continuación se muestra el contenido HTML del ChildComponent:

<div>  
 <input [(ngModel)]="text" placeholder="Texto del hijo"...

1. El Shadow DOM

Para poder entender el concepto de View Encapsulation (encapsulación de las vistas), es importante entender qué es el Shadow DOM. El Shadow DOM es una noción que proviene de los estándares de las Web Components, que permiten encapsular partes del DOM, así como los estilos.

Esto quiere decir que es posible limitar el campo de acción de un script o de un estilo, a un elemento concreto. Es posible aplicar estilos concretos a un único nodo del DOM, sin que el resto de la aplicación se vea afectada.

Es bastante obvio que esta noción es primordial para una aplicación que se construye centrada en componentes. Cada componente necesita su estilo particular, ya que sería molesto que el estilo definido para un componente se aplicara al resto de la aplicación.

Concretamente, con Angular, tomando el siguiente ejemplo de un template de componentes, así como el estilo de este, va a ser posible utilizar un simple selector, como encabezado o incluso p.paragraph. El estilo se aplica solo al componente en cuestión gracias al concepto del Shadow DOM. Esto es muy práctico, incluso esencial, cuando queremos utilizar componentes de terceros, que necesitan su propio estilo.

Template de un componente

<header>  
    Header  
</header>  
<section>  
    <h1 class="title">Título</h1>  
    <p class="paragraph">Texto del párrafo...</p>  
</section> 

Ejemplo de estilo

<style>  
    header {  
        font-size: 2em;  
        background: red;  
        color: #000;  
    }  
  
    section {  
        margin-top: 12px;  
    }  
  
   section h1 {  
        color: blue;  
    }  
  
    p.paragraph {  
        text-align: center;  
    }  
</style> 

O casi ... Es necesario saber que el Shadow DOM es una funcionalidad que aún...