div2を動的に追加するAngular2

Question

私は3または4のような数値を指定する入力ボックスを持っています。その下に親divがあります。入力ボックスに指定された番号に従って、私は親の中にその多くのdivを持っていたい。

 <div class="mdl-step__content"> 
      <!-- specify number --> 
      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> 
       <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="text5"> 
       <label class="mdl-textfield__label" for="text5">Number of important collegues</label> 
       <span class="mdl-textfield__error">Number required!</span> 
      </div> 
      <!-- circular divs --> 
      <div class="parent"> 
       <div class="circle"></div> 
       <div class="circle"></div> 
       <div class="circle"></div> 
       <div class="circle"></div> 
      </div> 
     </div> 

どうすれば実現できますか？

UPDATE：

Answer 1

あなたは、この目的のためにngForを使用することができます。

<input ngModel (ngModelChange)="updateNumber($event)" class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="text5"> 

<div class="parent"> 
    <div class="circle" *ngFor="let item of items"></div> 

updateNumber(val:number) { 
    this.items = new Array(+val); 
}