Collapse component allows you to toggle content on your pages with a bit of JavaScript and some\r\n classes. Flexible component that utilizes a handful of classes (from the required transitions\r\n component(not yet implemented)) for easy toggle behavior.
\r\nThe easiest way to add the collapse component to your app (will be added to the root module)
\r\nng add ngx-bootstrap --component collapse\r\n
isAnimated input option`,\r\n outlet: CollapseDemoAnimatedComponent\r\n },\r\n {\r\n title: 'Events',\r\n anchor: 'events',\r\n component: require('!!raw-loader!./demos/events/events'),\r\n html: require('!!raw-loader!./demos/events/events.html'),\r\n description: `Collapse directive exposes 4 events: collapses, that fires when a collapse was triggered (animation start),\r\n collapsed, that fires when a content was hidden (animation finished),\r\n expands, that fires when a expansion was triggered (animation start)\r\n and expanded, that fires when a content was shown`,\r\n outlet: CollapseDemoEventsComponent\r\n },\r\n {\r\n title: 'Manual toggle',\r\n anchor: 'manual-toggle',\r\n component: require('!!raw-loader!./demos/toggle-manual/toggle-manual'),\r\n html: require('!!raw-loader!./demos/toggle-manual/toggle-manual.html'),\r\n outlet: ToggleManualDemoComponent\r\n },\r\n {\r\n title: 'Inline display',\r\n anchor: 'inline-display',\r\n component: require('!!raw-loader!./demos/inline-display/inline-display'),\r\n html: require('!!raw-loader!./demos/inline-display/inline-display.html'),\r\n outlet: InlineDisplayDemoComponent\r\n },\r\n {\r\n title: 'Accessibility',\r\n anchor: 'accessibility',\r\n outlet: DemoAccessibilityComponent\r\n }\r\n ]\r\n },\r\n {\r\n name: 'API Reference',\r\n anchor: 'api-reference',\r\n outlet: ApiSectionsComponent,\r\n content: [\r\n {\r\n title: 'CollapseDirective',\r\n anchor: 'collapse-directive',\r\n outlet: NgApiDocComponent\r\n }\r\n ]\r\n }\r\n];\r\n","import { NgModule } from '@angular/core';\r\nimport { CommonModule } from '@angular/common';\r\nimport { FormsModule } from '@angular/forms';\r\nimport { RouterModule } from '@angular/router';\r\nimport { CollapseModule } from 'ngx-bootstrap/collapse';\r\n\r\nimport { DocsModule } from '@app/shared/components/docs';\r\nimport { CollapseSectionComponent } from './collapse-section.component';\r\nimport { DEMO_COMPONENTS } from './demos';\r\nimport { routes } from './demo-collapse.routes';\r\n\r\n@NgModule({\r\n declarations: [\r\n CollapseSectionComponent,\r\n ...DEMO_COMPONENTS\r\n ],\r\n imports: [\r\n CollapseModule.forRoot(),\r\n CommonModule,\r\n FormsModule,\r\n DocsModule,\r\n RouterModule.forChild(routes)\r\n ],\r\n exports: [CollapseSectionComponent],\r\n entryComponents: [...DEMO_COMPONENTS]\r\n})\r\nexport class DemoCollapseModule {}\r\n","import { CollapseSectionComponent } from './collapse-section.component';\r\n\r\nexport const routes = [{ path: '', component: CollapseSectionComponent }];\r\n","import { Component } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-accessibility',\r\n templateUrl: './accessibility.html'\r\n})\r\nexport class DemoAccessibilityComponent {}\r\n","Be sure to add aria-expanded to the control element. This attribute explicitly conveys the current state of the collapsible element tied to the control to screen readers and similar assistive technologies. If the collapsible element is closed by default, the attribute on the control element should have a value of aria-expanded=\"false\". If you’ve set the collapsible element to be open by default using the show class, set aria-expanded=\"true\" on the control instead. The plugin will automatically toggle this attribute on the control based on whether or not the collapsible element has been opened or closed. If the control element’s HTML element is not a button (e.g., an <a> or <div>), the attribute role=\"button\" should be added to the element.
If your control element is targeting a single collapsible element – i.e. the data-target attribute is pointing to an id selector – you should add the aria-controls attribute to the control element, containing the id of the collapsible element. Modern screen readers and similar assistive technologies make use of this attribute to provide users with additional shortcuts to navigate directly to the collapsible element itself.
Event: {{message}}\r\n Event: {{message}}\\r\\n