Angular2 динамически добавляя divs

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); 
}