Inputs – Angular 2+

Hola a todos, hoy os voy a explicar como funcionan los Inputs en Angular 2+.

En nuestra aplicación angular, necesitamos que nuestros componentes estén comunicados entre sí.

Para comunicar de componente padre con un componente hijo podemos usar Inputs, estos nos permiten pasar valores solo de padre a hijo, no al revés.

Aclarar que un componente padre es un componente que tiene componentes dentro de él, es decir, que se llaman en el HTML.

Empiezo creando el componente hijo:


import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  @Input() name: string;
  @Input() message: string;

  constructor() { }

  ngOnInit() {
  }

}

 

Con @Input() le indicamosque este componente puede recibir algo de fuera, en nuestro caso, el componente padre.

IMPORTANTE: estos valores solo estarán disponibles a partir de ngOnInit.

En la parte HTML, vamos a mostrar estos valores:

<h1>Componente {{name}}</h1>
<p>Mensaje: {{message}}</p>

Vamos a crear el componente padre:


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  public nameComponent1 = 'Hijo 1';
  public messageComponent1 = 'Este es el componente 1';

  constructor() { }

  ngOnInit() {
  }

}

En la parte HTML, vamos a crear a dos hijos, pero cada se lo vamos a pasar de una manera diferente.

El primer componente hijo, se lo vamos a pasar asi : [name]=”nameComponent1″ [message]=”messageComponent1″ porque son variables del ts, cuando eso pase tenemos que poner el [ ]

El segundo componente, se lo vamos a pasar asi: name=”Hijo 2″ message=”Este es el componente 2″, de esta manera le estoy pasando directamente el valor, como si fuera un atributo HTML normal.

La mayor parte de las veces lo veréis de la primera forma.



<div>
  <h1>Padre</h1>

  <div>
    <h1>Hijo 1</h1>
    <app-child [name]="nameComponent1" [message]="messageComponent1"></app-child>
  </div>

  <div>
    <h1>Hijo 2</h1>
    <app-child name="Hijo 2" message="Este es el componente 2"></app-child>
  </div>


</div>

Os dejo el ejemplo completo con el resultado final en stackblizt:


Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.

Etiquetas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *