Angular2 dynamically adding divs

Question

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:

Günter Zöchbauer · Accepted Answer · 2017-02-21 09:57:18Z

4

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

edited Feb 21, 2017 at 9:57

answered Feb 21, 2017 at 9:35

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Thinker Over a year ago

should it be: new Array(val)? also I had to remove set from the function. However, it do not let me add *ngFor="let item in items" on that div. It says : Property binding ngForIn not used by any directive on an embedded template.

Günter Zöchbauer Over a year ago

Wow, sorry! Seems to one of my more sloppy answers. It should be of instead of in.

Thinker Over a year ago

Now it does not give any errors, but whatever number I enter, it gives me just one div. Adding image to my question!

Günter Zöchbauer Over a year ago

Use new Array(+val) to ensure it's treated as number. plnkr.co/edit/beg2B5eQYGa2a5Zj0Azm?p=preview

Thinker Over a year ago

Yes, that's perfect! Thanks a lot :)

Collectives™ on Stack Overflow

Angular2 dynamically adding divs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related