Coders Free – Curso Aprende Angular desde cero
En Angular, la comunicación entre componentes es fundamental para crear aplicaciones eficientes y escalables. Una de las formas de lograr esto es a través del uso de la directiva @Input.
La directiva @Input permite pasar datos de un componente padre a un componente hijo. Esto es útil cuando queremos que un componente hijo reciba información del componente padre para mostrarla o procesarla de alguna manera.
Para utilizar @Input en Angular, simplemente añadimos un decorador en la propiedad del componente hijo que queremos que reciba los datos. Por ejemplo:
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-hijo',
template: '
{{texto}}
'
})
export class HijoComponent {
@Input() texto: string;
}
En este caso, el componente hijo espera recibir un dato de tipo string a través de la propiedad texto. Para pasar este dato desde el componente padre, lo hacemos de la siguiente manera:
import { Component } from '@angular/core';
@Component({
selector: 'app-padre',
template: `
`
})
export class PadreComponent {}
En el componente padre, utilizamos la sintaxis de corchetes para asignar el valor ‘Hola desde el padre’ a la propiedad texto del componente hijo. De esta manera, el texto se mostrará dentro del componente hijo al renderizar la vista.
Con la directiva @Input podemos establecer una comunicación bidireccional entre componentes en Angular, lo que nos permite crear aplicaciones más interactivas y dinámicas. Si quieres aprender más sobre Angular y sus funcionalidades, ¡no te pierdas nuestro curso en Coders Free!
Ponele "title" a todo y solo vas a causar confusión
Como se llama el la extencion que te autocompleta en VSC???
Gracias Victor excelente curso el que nos esta ofreciendo
Hola Victor, gracias por realizar tu contenido, me está sirviendo de gran ayuda.
Un saludo y un fuerte abrazo.
Muchas gracias.
hola victor tengo una duda con unos de tus curso ya te mande la pregunta. es el curso de apiLaravel. gracias de antemano saludos