¿Cómo comunicarse desde el componente principal al componente secundario en Angular 9?

Angular hace que la comunicación entre componentes sea muy fácil. En este artículo, aprenderemos cómo comunicarse desde un componente principal al componente secundario.

Acercarse:

• Vamos a crear dos componentes:
  1. padre
  2. niño
• En el componente principal, declare la propiedad que desea recibir en el componente secundario, diga ‘ParentId’.
• Mientras incluye el componente secundario dentro del componente principal, vincule la propiedad ‘ParentId’ al componente secundario mediante el enlace de propiedad.

  <child [id] = "parentid"></child>

• Ahora, en el componente secundario, importe la entrada de @angular/core y cree una propiedad decorada por @input decorador para recibir ‘ParentId’ del componente principal. El nombre de la propiedad debe ser el mismo que se usa para vincular la propiedad ‘ParentId’, es decir, ‘id’.

• ‘ParentId’ se recibirá con éxito en el componente secundario como ‘id’.

Ejemplo:

• En este ejemplo, crearemos una propiedad 'ParentId'y la recibiremos en el componente secundario.
  Escribamos el código para el componente principal.

  import { Component } from '@angular/core';    @Component({   selector: 'app-root',    // code for parent component view.      template:`   <div style="text-align: center;">   <h1>     parent component - {{parentid}}   </h1>   </div>    // Bind the ParentId to child component.      <child [id] = "parentid"></child>   `,   styleUrls: [] }) export class AppComponent {    // This property is to be sent to the child component.    parentid: number = 1;    }

• Ahora escriba el código para el componente hijo

  import { Component, OnInit, Input} from '@angular/core';    @Component({   selector: 'child',   template: `   <div style="text-align: center;">   <h2>child component</h2>    // property successfully received from the parent component.      parent id is {{id}}   </div>   `,   styles: [] }) export class TestComponent implements OnInit {    // @input decorator used to fetch the  // property from the parent component.      @Input()   id: number;        ngOnInit(): void {   }    }

Producción: