How to programmatically click wijmo tab?

How to programmatically click wijmo tab?

Posted by: jason.brandt on 15 November 2018, 3:00 pm EST

• 

  jason.brandt

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 15 November 2018, 3:00 pm EST

  I am using Angular 6 and I need to know how to call a wijmo tab click from the code

  <wj-tab-panel [selectedIndex]="1">
  		<wj-tab>
  			<a>Search</a>
  			<div>
  				tab 1 content
  			</div>
  		</wj-tab>
  		<wj-tab >
  			<a >Details</a>
  			<div>
  				tab 2 content
  			</div>
  		</wj-tab>
  	</wj-tab-panel>
  

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 November 2018, 12:27 am EST

  You may set selectedIndex property of TabPanel to change tab.
  
  Please refer to the following code snippet and sample:

  let tabIndexToSelect = 3;
  tabPanelInstance.selectedIndex = tabIndexToSelect;
  

  https://stackblitz.com/edit/angular-zjuufy?file=src%2Fapp%2Fapp.component.ts

  ~Sharad

• 

  jason.brandt

  • Post Options:
  • Link
    Copy

  Posted 16 November 2018, 2:31 pm EST

  This works in the context of the same component that has the tabs. But as a note, I had to create a service to access selTabindex from child components.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 19 November 2018, 1:17 am EST

  In this case, you may define selTabIndex property as an Input property, and then pass the value of the selected tab from the parent component using this property.
  
  Please refer to the following sample which demonstrates the same:
  
  https://stackblitz.com/edit/angular-ws6x55?file=src%2Fapp%2Fapp.component.ts

  ~Sharad