javascript - Angular 5 - onclick event append component into div - Stack Overflow

I am using Angular 5 and I have this:

// appponent.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './appponent.html',
  styleUrls: ['./appponent.css']
})
export class AppComponent {

  appendToContainer() {
    // Do the stuff here
    // Append PanelComponent into div#container
  }

}

Now the appponent.html

// appponent.html
<button (click)="appendToContainer()"></button>
<div id="container"></div>

and finally I have a simple ponent

// panelponent.html
<div class="panelComponent">
  This is a panel Component html
</div>

What I want to do is that everytime the button on appponent.html is click I need a panelponent appended into appponent.html

How can I do this?

I am using Angular 5 and I have this:

// app.ponent.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.ponent.html',
  styleUrls: ['./app.ponent.css']
})
export class AppComponent {

  appendToContainer() {
    // Do the stuff here
    // Append PanelComponent into div#container
  }

}

Now the app.ponent.html

// app.ponent.html
<button (click)="appendToContainer()"></button>
<div id="container"></div>

and finally I have a simple ponent

// panel.ponent.html
<div class="panelComponent">
  This is a panel Component html
</div>

What I want to do is that everytime the button on app.ponent.html is click I need a panel.ponent appended into app.ponent.html

How can I do this?

• javascript
• angular
• angular5

Share Improve this question Follow asked Nov 27, 2017 at 14:00 user8770372user8770372 4

• I have the feeling you take that problem from the wrong side. Shouldn't you iterate an array with a *ngFor? – Deblaton Jean-Philippe Commented Nov 27, 2017 at 14:07
• you can use an object array that you can append to when calling appendToContainer and use *ngFor to create a panel for each item in the array – FabioG Commented Nov 27, 2017 at 14:08
• What I want to do it the create a new instance on the ponent and append it inside the div when the button is clicked – user8770372 Commented Nov 27, 2017 at 15:44
• @pedromartinez did you find any solution? – Md. Mahmud Hasan Commented Nov 14, 2019 at 9:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

You can use a *ngFor and a variable to achieve you want

//In your ponent
num:number=0

//You html like 
<button (click)="num++"></button>
//we create a array "on fly" and slice to get only a "num" items
<div *ngFor="let item in [0,1,2,3,4,5,6,7,8,9].slice(0,num)" class="panelComponent">
  This is a panel Component html
</div>