web-dev-qa-db-fra.com

Angular 5 - composant événement onclick ajouter dans div

J'utilise Angular 5 et j'ai ceci:

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

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

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

}

Maintenant l'app.component.html

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

et enfin j'ai un composant simple

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

Ce que je veux faire, c'est que chaque fois que le bouton sur app.component.html est cliqué, j'ai besoin d'un panel.component ajouté à app.component.html.

Comment puis-je faire ceci?

javascriptangularangular5
1
pedromartinez

Vous pouvez utiliser un * ngFor et une variable pour obtenir le résultat souhaité

//In your component
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>
1
Eliseo