각도 5 - 사업부

Question

에 온 클릭 이벤트 APPEND 구성 요소 나 각도 5를 사용하고 있는데이 있습니다

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

} 

이제 app.component.html

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

그리고 마지막으로 내가 간단한 구성 요소가를

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