import {component$, useClientEffect$, useStore, useTask$, $} from '@builder.io/qwik'; import {Tabset, Tab, TabsetCustomEvent} from 'ngx-bootstrap'; export default component$(() => { const state = useStore({ activatedTab: '' }) const customId = 'selectEventTabs'; const showSelectedEvent = $((data: any) => { console.log(data); }) return ( <> <p>You can subscribe to tab's <code>select</code> event</p> {state.activatedTab ? ( <div className="mb-3"> <pre className="card card-block card-header">Event select is fired. The heading of the selected tab is: {state.activatedTab}</pre> </div> ) : ('') } <Tabset customId={customId} activeTabIsChanged={showSelectedEvent}> <Tab heading="Basic title" id="tabs-disabled-1">Basic content</Tab> <Tab heading="Basic Title 1" id="tabs-disabled-2">Basic content 1</Tab> <Tab heading="Basic Title 2" id="tabs-disabled-3">Basic content 2</Tab> </Tabset> </> ); });