Angular2. Dynamic component creation

Question

I have a simple table:

...
   <tr>
      <td>
        <a href="#">Add select</a>
      </td>
       <td>
        <a href="#">Add select</a>
      </td>
       <td>
        <a href="#">Add select</a>
      </td>
    </tr>
     <tr>
      <td>
        <a href="#">Add select</a>
      </td>
       <td>
        <a href="#">Add select</a>
      </td>
       <td>
        <a href="#">Add select</a>
      </td>
    </tr>

When user clicks on Add Select link I want to create select tag. For dropdown list I use ng2-select So, I have two problems, how to get specific td when user clicks Add select and how to create select component in that td.

Günter Zöchbauer · Accepted Answer · 2016-12-10 19:25:07Z

1

<tr>
  <td>
    <a href="#" (click)="addSelect(0)">Add select</a>
    <ng2-select *ngFor="let item in ng2Selects[0]"></ng2-select>
  </td>
   <td>
     <a href="#" (click)="addSelect(1)">Add select</a>
     <ng2-select *ngFor="let item in ng2Selects[1]"></ng2-select>
  </td>
   <td>

ng2Selects = [];
addSelect(index:number) {
  if(this.ng2Selects.length < index) {
    this.ng2Selects[index] = [];
  }
  this.ng2Selects[index].push('dummy');
}

edited Dec 10, 2016 at 19:25

answered Dec 10, 2016 at 11:05

Günter Zöchbauer

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

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

4 Comments

user348173 Over a year ago

There are can be a lot of select inside one cell.

user348173 Over a year ago

Thanks for the answer. But, I think your didn't get question. I want to create ng2-select itself and add to cell, not options for select.

Günter Zöchbauer Over a year ago

Where do you see options in my answer? Did you even try it?

user348173 Over a year ago

Oh, didn't get your code at a glance. I will try it asap. Thanks.

Collectives™ on Stack Overflow

Angular2. Dynamic component creation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related