Capítulo 4 - Compilación
Capítulo 5 - NgModules
Capítulo 6 - Directivas
Capítulo 7 - Componentes Avanzados
Capítulo 8 - Router
Capítulo 9 - Inyección de Dependencias
Capítulo 10 - LifeCycle
Capítulo 11 - Pipes
Capitulo 12 - HTTP
Capítulo 13 - UI AngularMaterial \/ PrimeNG
Final
3.2 Input
Hay varios tipos de componentes, el que vimos seria un "Componente Principal" lo que quiero decir con esto, es que ese componente, tiene una interacción inicial, y eso seria entrar como "HomeComponent", o que entra por el router (que vamos a ver mas adelante) por lo tanto esos componentes lo que hacen es directamente tener un init como "principal".
Ahora podriamos tener componentes dentro de componentes, y si nos ponemos a pensar es como super normal, imaginemos que tenemos unos datos iterables y esos tengan un componentes que podriamos "reutilizar" en distintos lugares de la aplicación, ya sea por su vista o su funcionalidad...
Estos componentes tienen interacciones y una de esas interacciones es el annotation @Input.
Un componente input super basico seria asi =>
import { Component, Input } from '@angular/core';
@Component({
selector: 'input-component',
template: ´
<li> {{entrada}} </li>
´,
StyleUrls: ['input.component.css']
})
export class InputComponent{
@Input() entrada:string;
constructor(){
console.log(this.entrada);
}
}
Y el componente " padre " o que instancie a este componente seria de este tipo
import { Component } from '@angular/core';
import { InputComponent } from 'input.component';
@Component({
selector: 'home-component',
template: `
<h1> Hola </h1>
<ul *ngFor="let id of ids">
<input-component entrada="id"></input-component>
</ul>
`
})
export class HomeComponent{
ids = [
id : 1,
id : 2,
id : 3,
id : 4,
id : 5
];
constructor(){}
}
El resultado de esto, va a ser un html con una lista del 1 al 5, y en la consola vamos a ver lo mismo, un console log por cada iteración del ngFor.
Es importante saber que podemos poner tantos Inputs como NECESITEMOS.

El annotation Input puede traer cualquier tipo de cosa, desde un string un any o un objeto completo.

Copy link