ngIf in child component in Angular

Question

I am trying to implement *ngIf in child component in my angular app. I want to use it based on the formControlName value of an input field. i want display it only if the formControl value matches the given value. how can i do it. please guide me.

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"></app-child>
</form>

ParentComponent TS

import { Component, VERSION , OnInit} from '@angular/core';
import {FormGroup, FormBuilder} from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
parentForm : FormGroup;
testdata: any = [];
  constructor(private fb: FormBuilder) { }
 ngOnInit(){
this.parentForm = this.fb.group({ 
    test0: [''],
        childForm: this.fb.group({ 
 test: [''],
  test1: [''],
   test2: [''],
    test3: [''],
  
        }),
});
this.parentForm.controls.childForm['controlss'].test.setValue(t1);
this.parentForm.controls.childForm['controlss'].test1.setValue(t2);
this.parentForm.controls.childForm['controlss'].test2.setValue(t3);
this.parentForm.controls.childForm['controlss'].test3.setValue(t4);

 }
}

childComponent HTML

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

childComponent TS

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

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

childForm: FormGroup;
  constructor() { }

  ngOnInit() {
  }

}

surendra kumar surendra kumar · Accepted Answer · 2020-07-02T09:04:44

Change the childComponent HTML code

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

And write the exact value of t1, t2,t3,t4.

ngIf in child component in Angular

1 Answers