In your code there was some mistakes

1. You didn't place any Selector ie: <app-child [parentOutputVar]="parentVar">
2. didnt write how to display values in child.

For more details refer :

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

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

For your purpose please check your edited example: https://stackblitz.com/edit/angular7-communication-between-components-coqvnq?file=src%2Fapp%2Fchild%2Fchild.component.html using @Input directive

Explanation

Here in parent components are changed to form with formcontrols -firstname, lastname, email etc. while clicking the button the form values are added into array-parentVar using .push. Here in parent.componet.html, we have added childcomponet directive as

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

The parentVar in parent.component sents data to app-child as input ([parentOutputVar]="parentVar").

The Data will displayed using structural directives -ngIf &ngFor

You can add properties to the child component like this:

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;
}

Communicate them down from the parent's html template like this:

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

And display them in the child's html template like this:

Hello {{firstname}}

For sharing data between parent and child components, we use the @Input() and @Output() decorators.

The first step is to establish the hierarchy between the parent and the child components. The <parent-component> provides context to the <child-component>

Out of the two discussed decorators @Input and @Output the @Input decorator lets a parent component update data in the child component and @Output decorator lets the child send data to the parent component.

Your requirement specifies, sending data to the child component from the parent component on click of the submit button. For which you first need to configure your child component such that,

• In your child.component.ts, Add the @Input() and decorate the property with it as shown below,

@Input() formData: any = [];

• In your parent.component.ts, use the child selector <app-child [formData] = "formValue"></app-child> as a directive within its template. Here we are using property binding to bind formValue property of parent to formData property of child.

TLDR;

Please find the StackBlitz project illustrating parent-to-child data communication.

Here I have updated the example you provided to display the values entered in the form inside your child component, using the Input() decorator.