Material2 - Two dynamic md-table on the same page, don't work

Question

Why if I add two component on the same page those component do not "do" the same? but only this at first in top

like this:

<h1>Angualr + Material</h1>
<button md-raised-button (click)="addEvent()">Add row for all ... to array</button>
<br><br>
<table-cart [tableData]="tableData"></table-cart>
<br><br>
<span>The same page but other place for example in other tab</span>
<br><br>
<table-cart [tableData]="tableData"></table-cart>

https://plnkr.co/edit/YFL0wdGGXrwtjs4Exrx1?p=preview

Answer 1

The reason is that you are using ViewChild. It gets the first instance of the specified element. You need to use ViewChildren instead and iterate over all and update.

In your plunker code, change @ViewChild line to this:

@ViewChildren(TableCartComponent) tableCarts: QueryList<TableCartComponent>

... and your addEvent method will become this:

    addEvent() {
        this.tableData.push({
            lp: this.tableData.length + 1,
            name: "name like...",
            code: "1111",
            color: "blue",
            size: "S",
            price: "99.99"
        });
        this.tableCarts.forEach(tableCart => tableCart.update());
        //this.TableCart.update();
    }

---

Here is a link to the updated PLUNKER DEMO