You may want to research Angular life cycle events. The reason why all your alerts are firing at the same time, is constructors are fired for components, prior to them actually being rendered. The component's class is instantiated and per any programing language, the constructor is fired by default.
How I would personally attack your problem:
*ngIf constraints on your child components, dependent on that tab actually being active. You can either do this by the
tabindex variable you have, or comparing the title of the active tab.
Move your alert logic in each subsequent child component, into the
OnInit lifecycle hook (
ngOnInit). This should be dispatched each time the tab is set to active.
I would assume the
TabView has an event hook for when the selected index changes. The syntax sugar for most Angular events is something like:
[(selectedIndex]) to handle both the
Output hooks. You could use this event emit, to specify the specific alert you want to display.