Uso de Inputs

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]=“imgParent1”></app-img>
parent2 <app-img [img]=“imgParent2”></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

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>

Angular DevTools https://chrome.google.com/webstore/detail/angular-devtools/ienfalfjdbdpebioblfackkekamfmbnh/related?hl=es

@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 “padre” y un componente hijo llamado “hijo”. Si quisieras pasar una propiedad del componente padre llamada “mensaje” 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: ‘app-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 “mensaje” al componente hijo. Por ejemplo:
’’<app-hijo [mensaje]=“mensajePadre”></app-hijo>’’

De esta manera, cuando el componente padre cambie el valor de “mensajePadre”, también se actualizará el valor de “mensaje” 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=“text” [(ngModel)]=“imgPadre”/>
<app-img [img]=“imgPadre”></app-img>
y con esto ya puede enviar información de un componente padre a un componente hijo

Que clase mas interesantes.