0

I'm trying to call several times the component HTML but without including again the child component in the father component.

I need it to be like this:

<father-component>
  <child-component #id>
  <button (click) = "#id.show()">
</father-component>

The html in the child component is hidden untill i press the button.

The thing is that i want to show the html of the child component as many times as the button is pressed.

As far as i know, the @ViewChild instantiates the html only one time, so if i try to append that html to another div, it will append the same. I need to know if there's a way to Instantiate a new @ViewChild anytime i call a function.

Hely Saul Oberto
  • 577
  • 1
  • 10
  • 22
  • ViewChild is just a reference to the DOM element. Maybe you want to use ViewChildren? – rjustin Oct 19 '17 at 17:49
  • `@ViewChild()` is not related to instantiating HTML, it only provides access to an element, component, or directive in the view. See also https://stackoverflow.com/questions/32693061/angular-2-typescript-get-hold-of-an-element-in-the-template/35209681#35209681 – Günter Zöchbauer Oct 19 '17 at 17:49

1 Answers1

3

One possible solution is to use an ngFor like this:

<father-component>
  <child-component *ngFor="let i of children">
  <button (click) = "increment()">
</father-component>

Then have an increment method in your component class that increments the number of children. That would allow you to have any number of child components.

DeborahK
  • 57,520
  • 12
  • 104
  • 129