Uso de Inputs

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.

angular-components1.png

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() { }
}

Tienes que 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 @Input cambia.

Aporte creado por: Kevin Fiorentino.

Aportes 12

Preguntas 6

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Imagen:

https://www.w3schools.com/howto/img_avatar.png

Pueden obtener una imagen al azar desde aqui

https://picsum.photos/200

Les dejo la imagen por defecto que usa Nicolas Molina:

Se usa el decorador @Input para enviarle información desde el componente padre hasta el componente hijo. De manera que en nuestro componente hijo tendremos que declarar la variable que queremos recibir desde el padre declarando esta de la siguiente manera:

@input() nombreVariable:string;

Por otro lado en nuestro componente padre tendremos que hacer referencia a esta variable a través del data binding y ubicando esta dentro del tag o etiqueta correspondiente a nuestro componente hijo

<componente-hijo [nombreVariable]="valor" > </componente-hijo>

Para los que se preguntan que hace el decorador @Input y por que es obligatorio ponerlo es por que el decorador @input indica a un componente que puede recibir un valor desde el componente padre, por eso debemos agregarle el decorador @input a la propiedad que deseamos controlar. m√°s info en este link https://medium.com/williambastidasblog/angular-decoradores-input-y-output-70af5f43a04

Aqui un link por si queren usar imagenes random

https://source.unsplash.com/random

Comunicación Padre - Hijo

Link de default img para no tener que descargarla

https://raw.githubusercontent.com/platzi/angular-componentes/2-step/src/assets/images/default.png

@Input() sirve para declarar las props, para los cuates de React ūüėČ

Que clase mas interesantes.

Hola, les dejo la documentación oficial por si quieren ver algo de teoría.
Inputs

El input también nos puede servir como un parámetro, ejemplo llamando el selector desde diferentes componentes padres:
parent1 <app-img [img]=‚ÄúimgParent1‚ÄĚ></app-img>
parent2 <app-img [img]=‚ÄúimgParent2‚ÄĚ></app-img>