Pushing Iterated Rows Depending on Number Selected in Reactive Forms in Angular

Question

I've a problem in iterating rows when i selecting a number in my dropdown. How would i push that number so that rows(cards) would be iterated depending on that number. My process is this, first you have to select Solo Traveller as 'No' so that the adults and children dropdowns would appear. That dropdown is my problem, how would i iterate rows(cards) depending on that number selected? I've made the rows(cards) but i don't know how would i iterate it. here's my stackblitz link

CLICK THIS LINK

 updateCountAdult(value) {
    console.log(value.target.value);
    this.form.addControl('adultRows', this.adultRows);
  }

  updateCountChildren(value) {
    console.log(value.target.value);
    this.form.addControl('childrenRows', this.childrenRows);
  }

  addAdult(): FormGroup {
    return this.fb.group({
      firstName: [null, Validators.required],
      lastName: [null, Validators.required]
    });
  }


  addChild(): FormGroup {
    return this.fb.group({
      firstName: [null, Validators.required],
      lastName: [null, Validators.required]
    });

}

Answer 1

here is the edited stackblitz :

https://stackblitz.com/edit/iterated-according-to-selected-number-dkrxeh?file=app/app.component.html