Mat Tab Isactive

First step let s import the mattabmodule from angular material in material module ts and add it to materialcomponents array.

Mat tab isactive. The index of the active tab. Each tab with content is added using the mat tab directive as follows. I have a mat tab nav bar navigation bar for my website but the mat tab link blue underlining bar won t chase the active button. To repro you need a mat tab group with two or more tabs and another component which has a property referencing the isactive property of one of the tabs.

I tried to use a viewchild decorator and accessing the element properties that way but it returns null. I want to get which tab is active. In this lecture let s take a look about tabs in angular material tabs basically allow you to organize content into separate views where only one view can be visible at a given time. Selectedindex expects a number binding as property so you can select any tab starting from 0 to workflow list length 1.

In the component template we will add mat tab group directive which wraps all tabs to show. If a tab s label is only text then the simple tab group api can be used. Mat tab group mat tab label first content 1 mat tab mat tab label second content 2 mat tab mat tab label third content 3 mat tab mat tab group this will. The selectedtabchange output event is emitted when the active tab changes.

Import component oninit viewchild from. Import mattabsmodule frm angular material. Mat tab group mat tab label one h1 some tab content h1. It just stays at the first button and doesn t move.