Header Ads Widget

Ticker

6/recent/ticker-posts

Componentes de Angular 10: entrada y salida / tuberías y directivas con ejemplos

 Esta guía la tomará a lo largo del aprendizaje sobre los componentes de Angular 10/9 con un ejemplo.

Entenderemos qué es un componente angular con ejemplos. Los componentes angulares son los componentes básicos de las aplicaciones angulares.

Antes de abordar los ejemplos, veamos qué aprenderemos a lo largo de este artículo.

¿Qué aprenderá sobre los componentes angulares?

  • ¿Qué es un componente angular?
  • ¿Cómo inicializar un nuevo proyecto de Angular 10?
  • ¿Cómo generar un nuevo componente Angular 10?
  • ¿Cómo enlazar las propiedades de los componentes en la plantilla?
  • ¿Cómo vincular las acciones del usuario desde la plantilla al componente?
  • ¿Qué son los ganchos del ciclo de vida de los componentes con ejemplos?
  • ¿Cómo comunicarse entre los componentes que utilizan @Inputy los @Outputdecoradores?
  • ¿Cómo cargar dinámicamente un componente con ejemplo?
  • ¿Cómo diseñar un componente?

Antes de comenzar con esta guía, debemos cumplir los siguientes requisitos previos:

  1. Node.js y npm instalados en su máquina de desarrollo,
  2. CLI angular 10/9.

¿Qué es un componente angular?

En pocas palabras, un componente angular controla una parte de la interfaz de usuario de su aplicación. Por ejemplo, el encabezado, el pie de página o la página completa pueden ser componentes. Dependiendo de la capacidad de reutilización que desee en su código.

Los componentes tienen que ver con la reutilización y la organización del código.

Técnicamente, un componente Angular es una clase de TypeScript decorada con el @Componentdecorador que es parte del núcleo Angular.

Vista de componentes

Un componente tiene una vista asociada que es simplemente un archivo HTML (pero también puede contener alguna sintaxis de plantilla angular especial que ayuda a mostrar datos y vincular eventos de la clase del componente)

Hojas de estilo de componentes

Un componente también tiene uno o más archivos de hojas de estilo asociados que se utilizan para agregar estilos a la vista del componente. Estos archivos pueden estar en muchos formatos como CSS, Stylus, Sass o Less.

La plantilla asociada con una componente angular tiene acceso a diferentes directivas, tales como ngModelngClassngIfngFor, etc.

La clase de componente TypeScript proporciona los datos y la lógica empresarial que estarán disponibles para la plantilla a través de enlaces de datos y métodos que se pueden aplicar a los elementos HTML de la plantilla.

En pocas palabras, estos son algunos datos sobre los componentes:

  • Los componentes angulares se pueden vincular a una plantilla HTML en línea o basada en archivos, hojas de estilo asociadas y metadatos de configuración.
  • La plantilla de componentes puede acceder a los datos de los componentes y escuchar eventos a través de enlaces,
  • Las plantillas pueden hacer uso de directivas incorporadas tales como ngModelngForngIfngClass, y ngStyle, etc para diversas tareas.

Puede definir un componente angular utilizando el @Componentdecorador con una clase de TypeScript.

Inicializando un nuevo proyecto de Angular 10

Para aprender a trabajar con componentes por ejemplo, necesitamos inicializar un proyecto de Angular 10. Anteriormente explicamos cómo crear un proyecto de Angular 10 usando Angular CLI.

Si no tiene Angular CLI 10 instalado, abra su interfaz de línea de comandos y ejecute el siguiente comando:

$ sudo npm install -g @angular/cli@next

Esto instalará la @angular/cliversión 10 en su terminal.

A continuación, inicialicemos un nuevo proyecto de Angular 10 usando el siguiente comando:

$ ng new angular10componentexample

La anatomía de un componente angular por ejemplo

Regrese a su proyecto Angular 10, abra el src/app/app.component.tsarchivo, debe encontrar el siguiente código:

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'angular10componentexample';
}

En este archivo exportamos la AppComponentclase y la decoramos con el @Componentdecorador, importado del @angular/corepaquete, que toma unos metadatos, como:

  • selector: Esto le permite invocar el componente de una plantilla HTML o un archivo al igual que las etiquetas HTML estándar, es decir: <my-app></my-app>,
  • templateUrl: Se utiliza para indicarle al componente dónde encontrar la vista HTML,
  • styleUrls: Esta es una matriz de rutas relativas a donde el componente puede encontrar los estilos utilizados para diseñar la vista HTML.

AppComponentes el componente raíz de nuestra aplicación. Es la base del árbol de componentes de nuestra aplicación y es el primer componente que se inserta en el DOM del navegador. Leer la [bootstrap](https://angular.io/guide/bootstrapping#the-bootstrap-array) matriz .

Una aplicación de Angular 10 se compone de un árbol de componentes, en el que cada componente de Angular tiene un propósito y una responsabilidad específicos.

Un componente se compone de tres cosas:

  • Una clase de componente, que maneja datos y funcionalidad. En la sección anterior, los datos del producto y el share()método se definieron para usted en la clase de componente.
  • Una plantilla HTML, que determina lo que se presenta al usuario. En la sección anterior, modificó la plantilla HTML de la lista de productos para mostrar el nombre, la descripción y un botón "Compartir" para cada producto.
  • Estilos de componentes específicos que definen la apariencia. La lista de productos no define ningún estilo.

Actualmente, nuestra aplicación tiene tres componentes:

  • app-root(cuadro naranja) es el shell de la aplicación. Este es el primer componente que se carga y el padre de todos los demás componentes. Puede pensar en ella como la página base.
  • app-top-bar (fondo azul) es el nombre de la tienda y el botón de pago.

Trabajar con componentes de Angular 10

La mayor parte del trabajo que realiza con Angular se relaciona con los componentes. Básicamente, una aplicación Angular es un árbol de componentes con un componente raíz.

Un componente controla una parte de la pantalla de la aplicación web. Consiste en código JavaScript (o precisamente TypeScript), código HTML y CSS. Si está familiarizado con la arquitectura o el patrón de diseño MVC (Modelo-Vista-Controlador), cada componente realmente usa la misma arquitectura: el código del componente representa el controlador y el código HTML (con CSS) representa la vista.

¿Cómo crear un componente Angular 10?

Puede crear un componente en Angular utilizando el @Component()decorador desde el que se puede importar @angular/core.

Simplemente decora una clase de TypeScript con el @Component()decorador que toma información sobre la vista HTML para usar en el componente y los estilos CSS. Para el código que controla el componente, está encapsulado dentro de la clase.

Aquí hay un ejemplo de un componente simple de Angular 10

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

@Component({
  selector: "my-component",
  template: "Hello Angular"
})
class MyComponent {
}

Este componente se puede llamar en su código HTML como cualquier etiqueta HTML estándar, es decir:

<my-component></my-component>

El resultado será: Hello Angular.

En un tutorial anterior hemos usado la CLI de Angular para generar una aplicación básica de Angular con la siguiente estructura de carpetas

En src/apppuede encontrar varios archivos para el componente raíz de la aplicación.

  • app.component.css : contiene todos los estilos CSS para el componente
  • app.component.html : contiene todo el código HTML que utiliza el componente para mostrarse
  • app.component.ts : contiene todo el código que usa el componente para controlar su comportamiento

También puede encontrar el archivo app.module.ts , que se usa para definir un módulo angular.

Un componente raíz es el primer componente angular que se inicia cuando se ejecuta la aplicación. Dos cosas son especiales sobre este componente:

Primero, si abre el archivo del módulo de la aplicación src/app/app.module.ts:

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Notará que se agrega a la matriz de arranque de la definición del módulo.

En segundo lugar, si abre el src/index.htmlarchivo (el primer archivo que se procesa cuando visita la URL de la aplicación) de la aplicación

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Angular</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>
    <app-root></app-root>
</body>
</html>

Notarás que se llama dentro de la <body>etiqueta del documento .

Comenzando con el componente raíz de la aplicación, se cargarán todos los demás componentes secundarios (el árbol).

Ahora, abramos el archivo del componente src/app/app.component.ts:

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "Angular";
}

Primero importamos la clase Component de @angular/coreLuego lo usamos para decorar la clase AppComponent que lo transforma en un componente. El decorador de componentes toma esta información:

  • El selector contiene el nombre de la etiqueta que se puede utilizar para crear este componente.
  • El templateUrl contiene la dirección URL relativa / ruta a la plantilla HTML que se utilizará como la vista
  • los styleUrls contiene la variedad de estilos CSS que se utilizará para peinar el componente

AppComponent tiene un título de variable que tiene un valor de cadena. Si observa la plantilla HTML del componente src/app/app.component.html:

<div style="text-align:center">
    <h1>
        Welcome to !
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;....">
</div>

Puede notar que estamos usando las llaves `` para mostrar el valor del título . Esto es lo que se llama enlace de datos (veremos el concepto en profundidad en los próximos tutoriales).

Creación de componentes angulares usando Angular CLI 10

Puede crear un componente creando manualmente los archivos necesarios o también puede usar la CLI de Angular para generar automáticamente el código mínimo para un componente básico. Angular CLI también se encarga de agregar el componente a la definición del módulo.

Para generar un componente con Angular CLI, simplemente ejecute el siguiente comando:

$ ng g component purchases

Puede encontrar las opciones disponibles en los documentos .

A continuación, definamos algunas variables y métodos de TypeScript en nuestro componente Angular. Abra el src/app/purchases/purchases.component.tsarchivo y agregue las siguientes variables:

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

@Component({
  selector: "app-purchases",
  templateUrl: "./purchases.component.html",
  styleUrls: ["./purchases.component.css"]
})
export class PurchasesComponent {
  title = 'My Purchases Report';
  reportDate: Date = new Date();
  headline = '';
}

A continuación, defina el siguiente método:

  createHeadline() {
    this.headline = `${this.title} of ${this.datePipe.transform(this.reportDate, 'short')}`;
  }

Este método hace uso de la tubería de fecha, por lo que debe importarlo e inyectarlo a través del constructor del componente:

import { Component } from "@angular/core";
import { DatePipe } from '@angular/common';

@Component({
  selector: "app-purchases",
  templateUrl: "./purchases.component.html",
  styleUrls: ["./purchases.component.css"]
})
export class PurchasesComponent {
  title = 'My Purchases Report';
  reportDate: Date = new Date();
  headline = '';
  constructor(private datePipe: DatePipe) { }
}

También debe importar y agregar DatePipea la matriz de proveedores del módulo de la aplicación al que pertenece nuestro componente de compras.

Abra el src/app/app.module.tsarchivo y actualícelo de la siguiente manera

@NgModule({
  // [...]
  providers: [DatePipe],
  // [...]
})

A continuación, vuelva al src/app/purchases/purchases.component.tsarchivo, debe invocar el createHeadlinemétodo en el ngOnInitevento del ciclo de vida del componente para asegurarse de que se llamará cuando se inicialice:

  ngOnInit(): void {
    this.createHeadline();
  }

A continuación, abra el src/app/purchases/purchases.component.htmlarchivo y actualícelo de la siguiente manera:

<h1 class="header"></h1>
<h2 class="sub-header"></h2>

A continuación, abra src/app/purchases/purchases.component.cssy agregue estos estilos CSS:

.header {
  font-size: 2.3em;
}

.sub-header {
  font-size: 1.3em;
}

Prueba unitaria de nuestro componente Angular 10

Después de implementar nuestro componente, podemos proceder a escribir las pruebas unitarias.

Abra el src/app/purchases/purchases.component.spec.tsarchivo y agregue el siguiente código para la prueba unitaria del componente de compras:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PurchasesComponent } from './purchases.component';

describe('PurchasesComponent', () => {
  let component: PurchasesComponent;
  let fixture: ComponentFixture<PurchasesComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ PurchasesComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(PurchasesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Finalmente, puede iniciar su aplicación Angular 10 usando el siguiente comando:

$ ng serve --open

Vinculación de variables de componentes de TypeScript en plantillas

Puede usar enlaces angulares para vincular variables y métodos de TypeScript declarados en la clase del componente a la plantilla del componente. También puede utilizar directivas integradas o personalizadas en sus plantillas.

Veamos cómo crear estas vinculaciones y directivas con el ejemplo. Primero, necesitamos definir las diversas variables de TypeScript de cadena, número, fecha y matriz y luego usaremos algo de sintaxis angular para vincularlas con elementos en nuestra plantilla.

Vaya al src/app/purchases/purchases.component.tsarchivo y agregue el siguiente código:

  title = 'Purchases';
  date: Date = new Date();
  dateAsString: string;
  discount = 20;

  products: any[] = [
    { id: 1, name: 'iPhone X', desc: 'Refurbished iPhone X 2019', price: 399 },
    { id: 2, name: 'iPhone 11 Pro', desc: 'The latest iPhone series', price: 1099 },
    { id: 3, name: 'Samsung S20', desc: 'The latest Samsung Galaxy S series in 2020', price: 1199 },
    { id: 4, name: 'Asus ROG Phone 2', desc: 'The gaming phone from Asus', price: 599 },
    { id: 5, name: 'Nokia 9', desc: 'The latest Nokia phone in 2020', price: 799 },
  ];

También veremos cómo usar la tubería de fecha incorporada, es decir, DatePipepara formatear fechas. Por lo tanto, debe importarlo usando la importdeclaración de TypeScript de la siguiente manera:

import { DatePipe } from '@angular/common';

A continuación, debe inyectar a través del constructor de la clase de la siguiente manera:

constructor(private datePipe: DatePipe) { }

Ahora, vinculemos nuestras variables de TypeScript en la plantilla. Dirígete al src/app/purchases/purchases.component.htmlarchivo y actualízalo de la siguiente manera:

<div class="container">
  <h1>:  </h1>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Product Name</th>
          <th>Description</th>
          <th>Price</th>
          <th>Discount</th>
          <th>Total Price</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let product of products">
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>%</td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Usamos enlaces de datos para mostrar los valores de nuestras variables de TypeScript en nuestra plantilla. También utilizamos el canal de moneda angular integrado, es decir, CurrencyPipepara mostrar la moneda junto al precio y el precio total de los productos.

Manejo de acciones en la clase de componentes

Angular proporciona enlaces unidireccionales, es decir, para intercambiar datos de las plantillas a los componentes que necesita para enlazar los métodos de TypeScript definidos en la clase de los componentes a los eventos DOM en las plantillas.

Hay muchos tipos de eventos que los usuarios pueden activar en las plantillas, como hacer clic, cambiar y seleccionar eventos. Comencemos por escuchar un clickevento desde un botón.

En el src/app/products/products.component.htmlarchivo, agregue el siguiente código:

<button (click)="setDate()">Set New Date</button>

A continuación, en el src/app/purchases/purchases.component.tsarchivo y agregue el siguiente método:

  setDate() {
    this.date = new Date();
    this.DateAsString = this.datePipe.transform(this.date, 'short');
  }

Si hace clic en el botón, la fecha real en su máquina se mostrará en su plantilla angular.

Veamos otro ejemplo del enlace de eventos de clic. En la plantilla, cambie de la siguiente manera:

        <tr *ngFor="let product of products" (click)="getRow(product)">
          [...]
        </tr>

A continuación, en la clase del componente, agregue el siguiente método que estará vinculado al evento de clic de cada fila de la tabla:

  getRow(product: any) {
    console,log(`Product ID: ${product.id}, Name: ${product.name}`);
  }

A continuación, vinculemos una acción al mouseoverevento de cada tabla de filas. Simplemente agregue el siguiente código:

        <tr *ngFor="let product of products" (click)="getRow(product)" (mouseover)="showSelected($event)">
          [...]
        </tr>
    [...]
<p></p>

A continuación, en la clase del componente, defina la selectedvariable de cadena y el showSelected()método que se invocará cuando se active el mouseoverevento en la tabla de filas. Simplemente mostraremos la fila correspondiente en la plantilla a través de la selectedvariable:

  selected: string;
  [...]
  showSelected(event: any) {
    this.selected = event.target.innerText;
  }

Publicar un comentario

0 Comentarios