angular append component to respective tabs

Question

I am trying to append component (dynamic created) to respective tabs using angular material and @viewChild but it is going to first tab only when I click button in the 2nd tab.

Here is Stackblitz - angular-append-component-to-respective-tabs

It's not displaying in individual tab. I have 3 tabs. all 3 tabs contains Add button, when I click on 1st tab's button, it's adding that component in 1st tab but when I click on 2nd tab's Add button, it's adding that component in 1st tab only, it should add in 2nd tab.

Can someone please help me to figure-out how to do this?

Answer 1

Have a working example here https://stackblitz.com/edit/angular-append-component-to-respective-tabs-jp5zzt-p7nonq

With ViewChild you always access the first one. Use ViewChildren and access with the selectedIndex