角度5 - のonclickイベント私は角度5を使用していますが、私はこれ持っているdiv要素

Question

にコンポーネントを追加します。今すぐapp.component.html

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

と最終的に私は単純なコンポーネントを持っているの

// 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 
    } 

} 

を

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

私は何をしたいと、そのたびに私はpanel.componentのAPPEを必要とする]をクリックしapp.component.html上のボタンがされていますapp.component.htmlに入っています

どうすればいいですか？

Answer 1

あなたは私はあなたが間違った側からその問題を取る感覚を持っている

//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>