Adding Child components dynamically based on maxcount

[sonal]

Hi Guys,

I am trying to do following in my application.

I have Parent component  "Parent 1" in which I have referenced a child component "child 1". "Parent 1" sends a count to Child 1, where Child 1 needs to load another child component 2  (which is a form) dynamically, based on the count sent from Parent 1.

In Parent 1 component

<parent1>

<child1 [count] = "2"></child1>

</parent>

in child 1 component

<ul>

<li *ngFor = need count here">

 <child 2> </child2>

</li>

</ul>

How can I accomplish this? Also, how to bind ng-model to child 1 component and save that data on child 1 component level?  I am using Angular 7

Thanks,

Sonal

[Sander Elias]

User @Input and @Output in tour child2

[sonal]

Hi Sander,

I am already using @input.

IN My child component, I need to use this input count and 

do  something like this

for(int i=0; i<= n-1; i++){    // n-1 being the count i sent from parent component.

 <div>

 // inside this div contains the form, 

</div>

}

// above for loop should be a list of forms bound to a model.

I am not able to implement this.

could you please help me with this?

Best,

Sonal

[bitdirector]

In parent component template:

<parent1>

<child1 [count] = "2"></child1>

</parent>

And in child component access that input like this:

import { Component,Input,OnInit } from '@angular/core';
@Component({
selector: 'child1',
template: `<
<ul>

<li *ngFor = let n of Count">

 <child 2> </child2>

</li>

</ul>

`
})
export class AppChildComponent implements OnInit{
@Input() Count: int ;
constructor(){
}
ngOnInit(){
}
}