How to append elements 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() {
    ???
}

Haha I know but I'm already using angular

Mingyu Jeon
– Mingyu Jeon

2017-11-16 03:04:26 +00:00
Commented Nov 16, 2017 at 3:04 — Mingyu Jeon
– Mingyu Jeon, Commented Nov 16, 2017 at 3:04

Vivek Doshi · Accepted Answer · 2017-11-16 04:02:58Z

3

Here it is, In the Angular way:

Component side

rowData = [];

addTbody() {
    rowData.push({
        name : 'something',
        age : '15',
        ...
    });
}

Template side

<table style="text-align: center; width: 100%">
    <tbody>
        <tr *ngFor='let row of rowData'>
            <td> {{ row.name }} </td>
            <td> {{ row.age }} </td>
        </tr>
    </tbody>
</table>

<button type="button" mat-raised-button color="primary" (click)="addTbody()">click here</button>

Try to avoid jQuery as much as possible,while learning Angular

answered Nov 16, 2017 at 4:02

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

4 Comments

Mingyu Jeon Over a year ago

Thanks for the reply. What if I want to append input field instead of data, what should I do? My question was it actually.

Mingyu Jeon Over a year ago

if I append input field, then it doesn't work well. I edited my post. Please check it out.

Vivek Doshi Over a year ago

@MingyuJeon, in that case you need to read : angular.io/guide/dynamic-form

Mingyu Jeon Over a year ago

I reverted and asked another question. Here's the link. TY stackoverflow.com/questions/47322274/…

Collectives™ on Stack Overflow

How to append elements dynamically with styles in angular5

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related