Comunicación de Componentes: Envío de Datos con Inputs en Angular

Curso de Angular: Componentes y Servicios

Contenido del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

20
Componentes y Servicios en Aplicaciones Web
01:09 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:009:31

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Curso de Angular: Componentes y Servicios

Clase 3 de 20

Clase 3 / 20

Recursos

Para comunicar componentes, Angular hace uso de decoradores para intercambiar información entre un componente padre hacia un componente hijo y viceversa.

Comunicando componentes

Para enviar información de padre a hijo, puedes utilizar el decorador @Input() para marcar una propiedad de una clase como punto de entrada de un dato.

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

@Component({
  selector: 'app-test-name',
  templateUrl: './test-name.component.html',
  styleUrls: ['./test-name.component.less']
})
export class TestNameComponent {

  @Input() firstname: string;

  constructor() { }
}

Debes importar Input desde @angular/core para poder utilizar esta directiva e indicar que la propiedad firstname es un dato que el componente padre enviará.

Podrás inicializar el componente desde su padre y pasarle los inputs que este necesite de la siguiente manera:

<app-test-name>
    firstname=""Platzi""
</app-test-name>

También puedes cambiar el nombre el Input especificando el nombre de la propiedad que quieras que este utilice al inicializar el componente.

...
    @Input('my-name') firstname: string;
...

<app-test-name>
    my-name=""Platzi""
</app-test-name>

Data binding en Inputs

El decorador @Input() detectará cualquier cambio en el dato y automáticamente actualizará su valor. Si ocurre algún evento en el componente padre que cambie el valor en el Input firstname, el componente hijo recibirá inmediatamente ese nuevo valor.

Input Set

Otra manera de utilizar la directiva @Input es de la siguiente manera:

    @Input() set saludar(firstname: string) {
        console.log('Hola', firstname)
    };

Observa que en esta oportunidad, cada vez que se envía un valor al @Input, se ejecutará la función saludar() que recibe como parámetro el valor que se le haya enviado.

De esta manera, puedes ejecutar la lógica que necesites dentro de esta función cada vez que el valor del @Inputcambia.

Contribución creada con los aportes de Kevin Fiorentino.

Platzi Team

Hace 4 años

Comunicacion entre componentes

En Angular, los componentes pueden comunicarse entre sí a través de entradas y salidas.

Uso de Inputs

Las entradas, también conocidas como propiedades de entrada, son valores que se pasan desde un componente padre a un componente hijo.

Para definir una entrada en un componente hijo, debemos decorar una propiedad con el decorador @Input(). Por ejemplo:

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

@Component({
  selector: 'app-child',
  template: '<p>{{ message }}</p>'
})
export class ChildComponent {
  @Input() message: string;
}

En este ejemplo, hemos definido una propiedad de entrada llamada message en el componente ChildComponent. Esta propiedad se puede utilizar en la plantilla del componente para mostrar un mensaje.

Para pasar un valor a una entrada en un componente hijo, podemos enlazar la propiedad de entrada con una propiedad del componente padre utilizando la sintaxis de corchetes. Por ejemplo:

<app-child [message]="Hello from parent"></app-child>

En este ejemplo, estamos enlazando la propiedad message del componente hijo con la cadena de texto "Hello from parent". Cuando se carga el componente hijo, la propiedad message tendrá el valor "Hello from parent", que se mostrará en la plantilla del componente.

Algunos trucos de l uso de Inputs

Input con nombre distinto: A veces, puede ser útil que la propiedad de entrada del componente hijo tenga un nombre diferente al de la propiedad del componente padre. En este caso, podemos usar el decorador @Input para especificar un nombre de entrada diferente al nombre de la propiedad. Por ejemplo:
```
import { Component, Input } from '@angular/core';

@Component({
 selector: 'app-child',
 template: '{{ myMessage }}'
})
export class ChildComponent {
 @Input('message') myMessage: string;
}
```
En este ejemplo, hemos definido una propiedad de entrada con el nombre message pero la propiedad del componente hijo se llama myMessage.
Input opcional: Si queremos que una propiedad de entrada sea opcional, podemos definir una propiedad de entrada con el tipo T | undefined. De esta forma, la propiedad de entrada tendrá un valor undefined si no se proporciona ningún valor. Por ejemplo:
```
import { Component, Input } from '@angular/core';

@Component({
 selector: 'app-child',
 template: '{{ message }}'
})
export class ChildComponent {
 @Input() message?: string;
}
```
En este ejemplo, la propiedad message es opcional porque se ha definido con el tipo string | undefined.
Input con valor predeterminado: Si queremos que una propiedad de entrada tenga un valor predeterminado, podemos utilizar la sintaxis de asignación de valores por defecto en el parámetro de entrada. Por ejemplo:
```
import { Component, Input } from '@angular/core';

@Component({
 selector: 'app-child',
 template: '{{ message }}'
})
export class ChildComponent {
 @Input() message = 'Default message';
}
```
En este ejemplo, la propiedad message tiene un valor predeterminado de "Default message". Si no se proporciona ningún valor para la propiedad de entrada, se utilizará este valor predeterminado.
Inputs múltiples: A veces, puede ser necesario pasar varias propiedades desde un componente padre a un componente hijo. En este caso, podemos utilizar el operador de propagación (...) para pasar un objeto con varias propiedades como entrada. Por ejemplo:
```
<app-child [myInput]="{ prop1: 'value1', prop2: 'value2'}"></app-child>
```
En el componente hijo, podemos definir una propiedad de entrada con el nombre myInput y el tipo Record<string, unknown> para recibir un objeto con varias propiedades.
```
import { Component, Input } from '@angular/core';

@Component({
 selector: 'app-child',
 template: `
 <ul>
 <li>{{ myInput.prop1 }}</li>
 <li>{{ myInput.prop2 }}</li>
 <li>{{ myInput.prop3 }}</li>
 </ul>
 `
})
export class ChildComponent {
 @Input() myInput: Record<string, unknown>;
}
```
En este ejemplo, estamos utilizando la plantilla para mostrar las tres propiedades del objeto myInput que hemos pasado desde el componente padre.

Comentarios (51)51 comentarios

Genix Xavier Granados Elias

Hace 5 años

Kevin Bueno

George Bryant Gutiérrez Gastélum

Nicolás Castro Barón

Aaron Paredes Cabrera

Valentín Eduardo González Morales

Juan David Varón

Jimmy Buriticá Londoño

JUAN MIGUEL PIEDRAHITA MONROY

William Ibañez

David Castro

Jose Antonio Diaz Urbano

Angel Hernandez

Sherlin Hernández

Diego Jurado

Ivan Hilario Pacheco

Daniela Stornelli

Jose Alfredo Cano Hernandez

Elber Liebermen

Jhon Alexander Alvarez Romero

John Ruiz

Gisela Angela Cristaldo

Diego Maldonado

Diego Fernando Caviedes Camaho

Fabián Ojeda

Walter Galdamez

Hace un mes

marco carreño maureira

Hace un año

Jonathan Bernal

Hace 9 meses

Miguel Angel Reyes Moreno

Brandon Lee Aguero Fernandez

Hace 3 años

Julian Franco

Ariel Emiliano Acevedo Posos

Sergio Gutiérrez Dominguez

William Armando Forero Bermeo

Componentes

Desarrollo de Tienda Online con Angular Avanzado

Creación y Gestión de Componentes en Angular

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Comunicación de Eventos entre Componentes en Angular

Creación y Reutilización de Componentes en Angular para Tiendas

Ciclo de Vida de Componentes en Angular: Constructor a OnDestroy

Manejo de eventos y limpieza en Angular con ngOnDestroy y setters

Componentes en Angular: Creación y Organización de Productos

Estilos en Angular: Alcance y Maquetación de Componentes

Despliegue Dinámico de Menú Lateral en Angular

Comunicación Padre-Hijo con Inputs y Outputs en Angular

Servicios

Creación y uso de servicios en Angular para lógica de negocio

Inyección de Dependencias en Angular: Conceptos y Funcionamiento

Conexión a APIs usando HTTP Client Module en Angular

Pipes y Directives

Uso de Pipes en Angular: Transformación y Formatos

Creación de Pipes Personalizados en Angular

Creación y Uso de Directivas en Angular para Manipular el DOM

Best practices

Reactividad y Manejo de Estado en Angular con NGRX

Implementación de Linter en Angular para Buenas Prácticas de Código

Despedida

Componentes y Servicios en Aplicaciones Web

Comunicación de Componentes: Envío de Datos con Inputs en Angular

Progreso del curso

Componentes

Servicios

Pipes y Directives

Best practices

Despedida

Recursos

Recursos