En tu código había algunos errores.

1. No colocó ningún Selector, es decir: <app-child [parentOutputVar]="parentVar">
2. no escribió cómo mostrar valores en child.

Para más detalles, consulte:

-> https://angular.io/guide/inputs-outputs

-> https://angular.io/guide/component-interaction

Para su propósito, consulte su ejemplo editado: https://stackblitz.com/edit/angular7-communication- between-components-coqvnq?file=src%2Fapp%2Fchild%2Fchild.component.html usando la directiva @Input

Explicación

Aquí, en los componentes principales, se cambian a formulario con controles de formulario: nombre, apellido, correo electrónico, etc. Al hacer clic en el botón, los valores del formulario se agregan a array-parentVar usando .push . Aquí en parent.componet.html, hemos agregado la directiva childcomponet como

 <app-child [parentOutputVar]="parentVar"></app-child>

parentVar en parent.component envía datos a app-child como entrada ([parentOutputVar]="parentVar").

Los datos se mostrarán usando directivas estructurales - ngIf & ngFor

Puede agregar propiedades al componente secundario de esta manera:

 import { Component } from '@angular/core'; @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css'] }) export class ChildComponent implements OnInit { @Input() firstname: string; }

Comuníquelos desde la plantilla html de los padres de esta manera:

 <app-child [firstname]="firstname"></app-child>

Y muéstrelos en la plantilla html del niño de esta manera:

 Hello {{firstname}}

Para compartir datos entre componentes primarios y secundarios, usamos los @Input() y @Output() .

El primer paso es establecer la jerarquía entre los componentes principal y secundario. El <parent-component> proporciona contexto al <child-component>

De los dos decoradores discutidos @Input y @Output , el decorador @Input permite que un componente principal actualice datos en el componente secundario y el decorador @Output permite que el elemento secundario envíe datos al componente principal.

Su requisito especifica enviar datos al componente secundario desde el componente principal al hacer clic en el botón submit . Para lo cual primero debe configurar su componente secundario de modo que,

• En su child.component.ts, agregue @Input() y decore la propiedad con él como se muestra a continuación,

 @Input() formData: any = [];

• En su parent.component.ts, use el selector secundario <app-child [formData] = "formValue"></app-child> como una directiva dentro de su plantilla. Aquí estamos usando el enlace de propiedad para vincular la propiedad formValue del padre a la propiedad formData del hijo.

TLDR;

Encuentre el proyecto StackBlitz que ilustra la comunicación de datos entre padres e hijos.

Aquí actualicé el ejemplo que proporcionó para mostrar los valores ingresados en el formulario dentro de su componente secundario, usando el decorador Input() .