Imagen:
https://www.w3schools.com/howto/img_avatar.png
Componentes
Todo lo que aprenderás sobre componentes y servicios en Angular
¿Qué son los componentes?
Uso de Inputs
Uso de Outputs
Componente para producto
Ciclo de vida de componentes
ngDestroy & SetInput
Lista de productos
Componentes y Header
Implementando el sideMenu
Comunicación padre e hijo
Servicios
Conociendo los servicios
¿Qué es la inyección de dependencias?
Obteniendo datos de una API
Pipes y Directives
Conociendo los pipes
Construyendo tu propio pipe
Conociendo las directivas
Best practices
Reactividad básica
Guia de estilos de Angular y linters
Despedida
Despedida
Para comunicar componentes, Angular hace uso de decoradores para intercambiar información entre un componente padre hacia un componente hijo y viceversa.
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>
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.
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
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
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>
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.