passing data between child and parent component

Question

In my angular app. I am using child and parent components. I want to pass data from my parent component to child component. I am able to do it. I have more data to pass to child component. instead of using Input property for each value. I want to use only one Input and pass more values with it. Is it possible?. please guide me.

I have tried passing multiple input values in the form of an array.The problem was i am implementing the form in childComponent onInit.

ParentComponent HTML

<form class="parentForm" [formGroup]="parentForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test0"
        />
      </div>
    </div>
  </div>
  <app-child
    [childForm]="parentForm.controls.childForm"
    [Test0]="Test"
    [Test1]="Test1"
    [Test2]="Test2"
    [Test3]="Test3"
    [Test4]="Test4"
    [Test5]="Test5"
  ></app-child>
</form>

childComponent TS

@Input() Test: any;
@Input() Test1: any;
@Input() Test2: any;
@Input() Test3: any;
@Input() Test4: any;
@Input() Test5: any;

childComponent HTML

<form [formGroup]="childForm">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-12" *ngIf="( Test === 't1')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test"
        />
      </div>
      <div class="col-md-12" *ngIf="(Test1 === 't2')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test1"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test2 === 't3')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test2"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test3 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test4 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
      <div class="col-md-12" *ngIf="( Test5 === 't4')">
        <input
          class=""
          type="text"
          placeholder=" info"
          formControlName="test3"
        />
      </div>
    </div>
  </div>
</form>

Alexis Alexis · Accepted Answer · 2020-07-06T07:12:33

You can pass object directly in your Input.

Something like this should work

ParentComponent.ts

let ultimate_test = {"Test":"t1","Test1":"t2"...}

ParentComponent.html

<app-child [childForm]="parentForm.controls.childForm" [ultimate_test]="ultimate_test"></app-child>

ChildComponent.ts

@Input() ultimate_test: any;

ChildComponent.html

<form  [formGroup]='childForm'>
  <div class="col-md-12" >
    <div class="row">
      <div class="col-md-12" *ngIf ="( ultimate_test.Test === 't1')">
        <input class="" type="text" placeholder=" info" formControlName="test">
      </div>
      <div class="col-md-12" *ngIf ="( ultimate_test.Test1 === 't2')">
        ...
      </div>
    </div>
  </div>
</form>

EDIT

I suggest you to specify your formControlName as value of your object ultimate_test. This way you can use a Pipe to iterate over the values on your child component and directly add your value to formControlName attribute. You will not have to use *ngIf at each input.

passing data between child and parent component

1 Answers