Make tab active at run time

Hello,

Below is the HTML setup for the tab component with a template reference variable #notes assigned to one of the tabs.

In the ngOnInit – for certain route parameters, would like to make one of the non-first tabs the active one e.g. –

ngOnInit() {

// debugger;

this.notes.select();

// this.notes.isSelected = true;

}

There is only one router-outlet for the application

<!– operational\components\analyzer\analyzer.component.html –>
<div class=”layout-box-container”>
<div class=”layout-box-top” igxLayout igxLayoutDir=”row”>
<span><a [routerLink]=”””>Operational</a></span>
<span class=”atitle”>Analyzer Diagnostics</span>
</div><!– /.layout-box-top –>

<div class=”tabs” igxLayout igxLayoutDir=”row” igxLayoutJustify=”space-between”>
<igx-tabs style=”width: 100%”>
<igx-tabs-group label=”STREAM” name=”stream”>
<stream></stream>
</igx-tabs-group>

<igx-tabs-group label=”NOTES” name=”notes” #notes>
<notes></notes>
</igx-tabs-group>
</igx-tabs>
</div><!– /.tabs –>
</div><!– /.layout-box-container –>

Thanks and regards,

Amit Kohli

Hi Amit,

If you want to set selected tan on ngOnInit you can use the selectedIndex input of the tab component.

Here is a sample with this.

That worked thank you.

Amit