# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jorgeucano.gitbook.io/entendiendo-angular/capitulo-3-componentes/32-input.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.