ng-bootstrap HomeBasicAlertFormsFloating labelsInput groupMulti-rangeRangePhone inputSelectRadioCheckboxDatepickerTimepickerDateTime pickerContainersGridCardTab controlRatingBadgeBreadcrumbButton groupButton typeCalendarMarqueeList groupTreeviewTree selectTableClosePaginationPlaceholderSpinnerColor pickerProgress barFor directiveIconOverlaysModalsOffcanvasTooltipToastPopoverDropdownTypeaheadContext menuShellDropdown menu (WC)AdvancedCopyCode snippetPipesTrust-htmlSplit-stringLinifySlugifyWord-countFont-colorHas-propertyToggle buttonsSticky footerAutofocusTrackByAsync HostBindingInstance ofIs interfaceResizableOrdinal numbersMarkdownParallaxPriority navigationScrollspyFile uploadSignature padLazy-loading componentsUser-agentNavigation lockNavigation lock (master/detail)EnterpriseCarouselSchedulerTimelineDockRibbonTile managerDatatablesFile managerQuery builderOTP inputNavbarSplitterAccordionAnimationsSlide up/downFade in/outColor transitionAdditional samplesCollapseFocusTrapDrag-dropTree-select drag-dropQR-code viewerStepperThemingAnchor scrollingSection 1Section 2Section 3Section 4Section 522.13.0

Treeview

Data-driven recursive tree. Pass a TreeNode[] via [items] and supply an *bsTreeviewNode template to render each node body with arbitrary Angular content (icons, labels, badges, custom layout). Two-way bindings [(expandedIds)] and [(selectedIds)] let you control state.

Basic usage

Keyboard shortcuts
  • / — move focus to previous / next visible row
  • — expand collapsed folder, or jump to first child
  • — collapse expanded folder, or jump to parent
  • Home / End — first / last visible row
  • Enter — toggle selection (and expand/collapse if folder)
  • Space — toggle selection on focused row