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.