CODEWITHSUNDEEP
angular
Thinker
Thinker

Reputation: 5366

Angular2 dynamically adding divs

I have an input box where I will specify a number like 3 or 4 and below it I have a parent div. As per the number specified in the input box I want to have that many divs inside parent.

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

How can I achieve it?

UPDATE: enter image description here

Upvotes: 1

Views: 922

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658057

You can use ngFor for this purpose:

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

Upvotes: 4

Related Questions