Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

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.

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.

<p style=鈥榯ext-align:center;鈥>
<img src=鈥https://static.platzi.com/media/articlases/Images/Screenshot from 2022-04-05 22-42-58.png鈥 alt=鈥淓nvio de datos componente padre a hijo鈥>
</p>

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.

Aportes 27

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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:

@Input() sirve para declarar las props, para los cuates de React 馃槈

Comunicaci贸n Padre - 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

La forma de pasar los @input al componente hijo me recuerda mucho a pasar props en React ^^

Aqui un link por si queren usar imagenes random

https://source.unsplash.com/random

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>

Link de default img para no tener que descargarla

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

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

Hace 4 meses vi este curso hoy gracias a que consegu铆 un trabajo formal como front end lo estoy volviendo a ver鈥 recomiendo verlo 2 veces ampliamente, todo me esta quedando super claro

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: '<p>{{ myMessage }}</p>'
    })
    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: '<p>{{ message }}</p>'
    })
    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: '<p>{{ message }}</p>'
    })
    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.

Acabo de ver que en realidad no hab铆a entendido el -ngIf :v

@input

Sirve para pasar informaci贸n del componente padre al hijo.

En Angular esto se hace con el decorador @Input() en el caso de comunicarse de padre a hijo, de lo contrario se usa @output(). Estos se importan desde @angular/core.

  • En el controlador del componente hijo:

    import { Component, OnInit, Input } from '@angular/core';
    
    @Component({
      selector: 'app-img',
      templateUrl: './img.component.html',
      styleUrls: ['./img.component.scss']
    })
    export class ImgComponent implements OnInit {
    	// Decorador para intercambiar info entre componentes
      @Input() img: string = 'Valor inicial';
    
      constructor() { }
    
      ngOnInit(): void {
      }
    }
    
  • En la vista del componente padre:

    <app-img img="Desde el padre"></app-img>
    

    En este caso la propiedad que va a recibir el componente hijo desde el padre es img.

Si se usara property binding para cambiar la propiedad de forma din谩mica.

  • Controlador del componente padre:

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })
    export class AppComponent {
    	// Propiedad actualizada por un input
      imgParent = '';
    }
    
  • Vista componente padre:

    <input type="text" [(ngModel)]="imgParent">
    <app-img [img]="imgParent"></app-img>
    
  • Vista componente hijo:

    <p>img works!</p>
    <h1>{{ img }}</h1>
    

    En este caso el <input> actualiza la propiedad imgParent que es pasa desde el padre al componente hijo,

Getter y setter son posible para los @Inputs

private _price;

@input() 
get price(){
	return this._price
}

set price(price: number){
	this._price  = price
}

El input tambi茅n nos puede servir como un par谩metro, ejemplo llamando el selector desde diferentes componentes padres:
parent1 <app-img [img]=鈥渋mgParent1鈥></app-img>
parent2 <app-img [img]=鈥渋mgParent2鈥></app-img>

Tratare de explicar un poco m谩s este c贸digo que encontr茅 en la secci贸n de recursos.

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

Entonces, este setter permite realizar acciones adicionales o modificar el valor de una propiedad que proviene de un componente padre. No te preocupes, que m谩s adelante veras sobre esto en el curso

que pasa si uso un menu en el component padre y requiero enviar algun parametro por @Input uso \[routerLink] ejemplo \
\
\

My Store\

\
\ \
\<router-outlet>\</router-outlet>

Esta es una buena opci贸n para obtener im谩genes para nuestros proyectos: https://picsum.photos/400/300

Como usar v-model en components de Vue

En Angular, los inputs son propiedades que se pasan a un componente desde su componente padre. Estas propiedades se utilizan para configurar el comportamiento del componente hijo y para pasar datos desde el componente padre al hijo. Los inputs se declaran en el decorador @Input() del componente hijo y se pueden utilizar en su plantilla para mostrar o manipular los datos.

Uso de inputs

En esta clase veremos los Inputs, que nos funciona para pasar informacion desde el componente padre al componente hijo

Consiste en usar la etiqueta @Input de Angular. 脡sta etiqueta se pone en el componente hijo para indicar que esa variable proviene desde fuera del componente, es decir desde el componente padre.

A esto se en otros frameworks como Vue se le suele llamar props. Con esto vas a poder tener un componente que sea configurable pudiendo pasar datos al usarlo.

Veamos un ejemplo, en el componente hijo:

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

@Component({
  selector: 'app-images',
  templateUrl: './images.component.html',
  styleUrls: ['./images.component.scss']
})
export class ImagesComponent implements OnInit {

  @Input() urlImage: string = 'Valor inicial'; // <--- Marcamos la propiedad con Input para recibirla desde el componente padre

  constructor() { }

  ngOnInit(): void {
    // this.image
    console.log('Hola');
    console.log('this.urlImage: ', this.urlImage);
  }

}

En el html del componente hijo:

<div>
  <img [src]="urlImage" alt="image" width="200" *ngIf="urlImage; else elseImg">
  <ng-template #elseImg>
    <img [src]="'https://picsum.photos/200'" alt="else image" width="300">
  </ng-template>

</div>

En el componente padre:

import { Component, OnInit } from '@angular/core';
import { Products } from './products.model';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  public urlPicture: string = 'https://www.w3schools.com/howto/img_avatar.png'; // Creamos la variable con la url

  constructor() { }

}

En el html del componente padre:

<input type="text" [(ngModel)]="urlPicture">
<!-- pasamos como atributo la variable definida con Input y como valor le pasamos la url -->
<app-images [urlImage]="urlPicture"></app-images>

@Input es un decorador en Angular que se utiliza para enlazar propiedades de un componente padre a un componente hijo. Con @Input, puedes pasar datos de un componente padre a un componente hijo utilizando la sintaxis de enlace de propiedad en la plantilla HTML.

Por ejemplo, supongamos que tienes un componente padre llamado 鈥減adre鈥 y un componente hijo llamado 鈥渉ijo鈥. Si quisieras pasar una propiedad del componente padre llamada 鈥渕ensaje鈥 al componente hijo, podr铆as hacerlo de la siguiente manera:

En el componente hijo, define una propiedad con el decorador @Input. Por ejemplo:

``
import { Component, Input } from 鈥楡angular/core鈥;

@Component({
selector: 鈥榓pp-hijo鈥,
templateUrl: 鈥./hijo.component.html鈥,
styleUrls: [鈥./hijo.component.css鈥橾
})
export class HijoComponent {
@Input() mensaje: string;
}
``

En la plantilla del componente padre, utiliza la sintaxis de enlace de propiedad para pasar el valor de 鈥渕ensaje鈥 al componente hijo. Por ejemplo:
鈥欌<app-hijo [mensaje]=鈥渕ensajePadre鈥></app-hijo>鈥欌

De esta manera, cuando el componente padre cambie el valor de 鈥渕ensajePadre鈥, tambi茅n se actualizar谩 el valor de 鈥渕ensaje鈥 en el componente hijo.

Es importante tener en cuenta que @Input solo se puede utilizar para pasar datos de un componente padre a un componente hijo. Si necesitas pasar datos entre componentes que no tienen una relaci贸n de padre-hijo, puedes utilizar otras opciones como @Output y servicios compartidos.

como enlazar atributos de un componente padre a un componente hijo:

en el componente hijo, usamos el decorador @Input() en la variable que se va a renderiza en el HTML del componente hijo.
en el componente padre se crea una variable que se va a encargar de almacenar la informaci贸n del input con ngModel que previamente debemos importar en el archivo de app.module.ts.
por ultimo en el HTML del componente padre, en el input se realiza un binding con ngModel de la variable creada en el TS del componente padre, posteriormente en la etiqueta que pertenece al componente HTML del hijo se hace binding con la variable que se coloco como como input y se le env铆a la variable del padre. EJP:
<input type=鈥渢ext鈥 [(ngModel)]=鈥渋mgPadre鈥/>
<app-img [img]=鈥渋mgPadre鈥></app-img>
y con esto ya puede enviar informaci贸n de un componente padre a un componente hijo

Que clase mas interesantes.