Note that tabs can be given role=\"tablist\", role=\"tab\" and role=\"tabpanel\" attributes.\r\n These are appropriate for tabbed interfaces, as described in the WAI\r\n ARIA Authoring Practices.
If your control element is targeting a single collapsible element - you should add the aria-controls attribute to the control element,\r\n containing the id of the collapsible element.
To confirm the tab content opening you should use aria-selected property.\r\n If aria-selected=\"true\" it indicates the tab control is activated and its associated panel is displayed.
If you use a visible text element on the page as a label for a focusable element - you should add aria-labelledby. It refers to the tab element that controls the panel.
\r\n \r\n LEFT_ARROW\r\n \r\n | \r\n \r\n Move focus to previous tab\r\n | \r\n
\r\n \r\n RIGHT_ARROW\r\n \r\n | \r\n \r\n Move focus to next tab\r\n | \r\n
\r\n \r\n HOME\r\n \r\n | \r\n \r\n Move focus to first tab\r\n | \r\n
\r\n \r\n END\r\n \r\n | \r\n \r\n Move focus to last tab\r\n | \r\n
\r\n SPACE or ENTER\r\n | \r\n \r\n Switch to focused tab\r\n | \r\n
Tabs can be enabled or disabled by changing disabled input property
\r\n \r\n
\r\nThe Component inside the Tab is rendered, when the tab is activated and destroyed when the tab is left.
\r\n\r\n Sub-Component {{ name }}\r\n
\r\n","import { Component, ChangeDetectionStrategy } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-tabs-dynamic',\r\n changeDetection: ChangeDetectionStrategy.OnPush,\r\n templateUrl: './dynamic.html'\r\n})\r\nexport class DemoTabsDynamicComponent {\r\n tabs: any[] = [\r\n { title: 'Dynamic Title 1', content: 'Dynamic content 1' },\r\n { title: 'Dynamic Title 2', content: 'Dynamic content 2' },\r\n { title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true }\r\n ];\r\n\r\n addNewTab(): void {\r\n const newTabIndex = this.tabs.length + 1;\r\n this.tabs.push({\r\n title: `Dynamic Title ${newTabIndex}`,\r\n content: `Dynamic content ${newTabIndex}`,\r\n disabled: false,\r\n removable: true\r\n });\r\n }\r\n\r\n removeTabHandler(tab: any): void {\r\n this.tabs.splice(this.tabs.indexOf(tab), 1);\r\n console.log('Remove Tab handler');\r\n }\r\n}\r\n","Change quantity of tabs by manipulating tabs array
\r\n \r\n \r\nYou can select tabs directly from component
\r\n\r\n \r\n \r\n
\r\nEvent select is fired. The heading of the selected tab is: {{value}}\r\nLorem Ipsum is simply dummy text of the printing and typesetting industry.\r\n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\r\n when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\r\nIt has survived not only five centuries, but also the leap into electronic typesetting,\r\n remaining essentially unchanged. It was popularised in the 1960s with the release of\r\n Letraset sheets containing Lorem Ipsum passages
\r\nAdd quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus. Nested tabs are not supported.
\r\nThe easiest way to add the tabs component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component tabs\r\n
Bootstrap 4 doesn\\'t have justified classes
',\r\n outlet: DemoTabsJustifiedComponent\r\n },\r\n {\r\n title: 'Custom class',\r\n anchor: 'tabs-custom-class',\r\n component: require('!!raw-loader!./demos/custom-class/custom-class'),\r\n html: require('!!raw-loader!./demos/custom-class/custom-class.html'),\r\n outlet: DemoTabsCustomClassComponent\r\n },\r\n {\r\n title: 'Select event',\r\n anchor: 'select-event',\r\n component: require('!!raw-loader!./demos/select-event/select-event'),\r\n html: require('!!raw-loader!./demos/select-event/select-event.html'),\r\n description: 'You can subscribe to tab\\'s select event
Tabs can be enabled or disabled by changing disabled input property
\\r\\n \\r\\n
\\r\\nThe Component inside the Tab is rendered, when the tab is activated and destroyed when the tab is left.
\\r\\nChange quantity of tabs by manipulating tabs array
\\r\\n \\r\\n \\r\\nYou can select tabs directly from component
\\r\\n\\r\\n \\r\\n \\r\\n
\\r\\nEvent select is fired. The heading of the selected tab is: {{value}}\\r\\nLorem Ipsum is simply dummy text of the printing and typesetting industry.\\r\\n Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,\\r\\n when an unknown printer took a galley of type and scrambled it to make a type specimen book.
\\r\\nIt has survived not only five centuries, but also the leap into electronic typesetting,\\r\\n remaining essentially unchanged. It was popularised in the 1960s with the release of\\r\\n Letraset sheets containing Lorem Ipsum passages
\\r\\n