How to append input field dynamically with styles in angular5

Question

I'm trying to append elements dynamically when I click a button. Actually when I click a button, elements append well. But the problem is that function and style is not worked. My code is below.

P.S. I'm using angular5

HTML

<table style="text-align: center; width: 100%">
    <tbody #tContent>
        <!-- I want to append element in here -->
    </tbody>
</table>
    <button type="button" mat-raised-button color="primary" (click)="addTbody()">click here</button>

TS

    addTbody() {
    // I want append below code whenever I click.
    <tr>
      <td style="padding: 30px">
        <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="alert('$event')">
      </td>
      <td style="padding: 30px">
        <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="test2(file)">
      </td>
    </tr>
    <tr>
      <td style="padding: 30px">
          <input  placeholder="image Info" type="text" size="25">
      </td>
      <td style="padding: 30px">
          <input placeholder="image Info" type="text" size="25">
      </td>
    </tr>
}

Vivek Doshi · Accepted Answer · 2017-11-16 05:38:58Z

1

Here you go :

Component side :

this.rows = [];

addTbody() {
    this.rows.push(1);
}

Template side :

<table style="text-align: center; width: 100%">
    <tbody>
        <ng-container *ngFor='let row of rows'>
            <tr>
                <td style="padding: 30px">
                    <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="alert('$event')">
                </td>
                <td style="padding: 30px">
                    <input type="file" accept="image/png, image/gif, image/jpeg, image/bmp, image/x-icon" (click)="test2(file)">
                </td>
            </tr>
            <tr>
                <td style="padding: 30px">
                    <input  placeholder="image Info" type="text" size="25">
                </td>
                <td style="padding: 30px">
                    <input placeholder="image Info" type="text" size="25">
                </td>
            </tr>
        </ng-container>
    </tbody>
</table>

Link to WORKING DEMO

edited Nov 16, 2017 at 5:38

answered Nov 16, 2017 at 5:29

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

12 Comments

Mingyu Jeon Over a year ago

Thanks for the reply again. But, this code occur error this, "If 'ngTemplate' is an Angular component, then verify that it is part of this module."

Vivek Doshi Over a year ago

Sorry typo please change it to ng-template, try again.

Mingyu Jeon Over a year ago

Hmm... now error doesn't happened but nothing appended when I clicked a button.

Vivek Doshi Over a year ago

Did you clicked on button ?

Mingyu Jeon Over a year ago

Yes, I did. What does the meaning of 1 in the this.rows.push()?

|

Collectives™ on Stack Overflow

How to append input field dynamically with styles in angular5

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related