# mgcrea/angular-strap **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/mgcrea-angular-strap).** 5,673 stars · 1,344 forks · JavaScript · MIT · archived ## Links - GitHub: https://github.com/mgcrea/angular-strap - Homepage: mgcrea.github.io/angular-strap - awesome-repositories: https://awesome-repositories.com/repository/mgcrea-angular-strap.md ## Description Angular-strap is a collection of pre-built AngularJS 1.x directives that wrap Bootstrap 3 components into reusable UI widgets and interactive behaviors. It provides native AngularJS 1.2+ directives for common UI patterns including datepickers, popovers, and scroll-based navigation, turning Bootstrap 3 markup into interactive widgets such as tabs, alerts, and side panels. The library wraps Bootstrap 3 jQuery plugins as AngularJS directives using the compile and link phases for DOM manipulation. It offers a set of AngularJS directives implementing Bootstrap 3 UI components like modals, tooltips, and dropdowns, along with date and time picker inputs, dropdown and select menus, modal and panel dialogs, scroll-aware UI behavior, and tooltip and popover overlays. The project includes interactive UI widgets such as alert banners, collapsible panels, date and time pickers, dropdowns, modals, navigation highlights, popovers, scroll pinning, select inputs, side panels, tabs, toggles, tooltips, and typeahead suggestions. It also provides testing utilities that replace the animation module with a lightweight stub to simulate animation timing without real browser frames. ## Tags ### Software Engineering & Architecture - [Directive Collections](https://awesome-repositories.com/f/software-engineering-architecture/project-architectures/modular-project-structures/angularjs/directive-collections.md) — A collection of pre-built AngularJS 1.x directives for common UI patterns. - [Bootstrap 3 Directive Wrappers](https://awesome-repositories.com/f/software-engineering-architecture/reusable-component-architectures/angularjs-component-architectures/bootstrap-3-directive-wrappers.md) — Provides AngularJS directives that wrap Bootstrap 3 jQuery plugins for DOM manipulation. ### Data & Databases - [Input Suggestions](https://awesome-repositories.com/f/data-databases/search-suggestions/input-suggestions.md) — Ships a typeahead directive that shows dynamic suggestions as the user types into a text input. ([source](https://mgcrea.github.io/angular-strap)) ### Development Tools & Productivity - [Bootstrap 3 UI Toolkits](https://awesome-repositories.com/f/development-tools-productivity/python-development-guides/style-guides/angularjs/bootstrap-3-ui-toolkits.md) — Set of AngularJS 1.2+ directives providing Bootstrap 3-styled UI elements. ### User Interface & Experience - [Bootstrap 3 Implementations](https://awesome-repositories.com/f/user-interface-experience/component-libraries/angular-ui-libraries/bootstrap-implementations/bootstrap-3-implementations.md) — A collection of AngularJS directives implementing Bootstrap 3 UI components. - [Date and Time Pickers](https://awesome-repositories.com/f/user-interface-experience/date-and-time-pickers.md) — Provides calendar and timepicker widgets bound to text inputs with locale support. - [Date Pickers](https://awesome-repositories.com/f/user-interface-experience/date-pickers.md) — Shows a datepicker on a text input with locale support, controllable programmatically. ([source](http://mgcrea.github.io/angular-strap)) - [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/dropdown-menus.md) — Renders dropdown lists, select menus, and typeahead suggestions bound to dynamic data arrays. - [Dropdowns](https://awesome-repositories.com/f/user-interface-experience/dropdowns.md) — Reveals a list of clickable items attached to any element, such as a button or navbar. ([source](https://mgcrea.github.io/angular-strap)) - [Tooltip Overlays](https://awesome-repositories.com/f/user-interface-experience/hover-previews/content-reveal-on-hover/tooltip-overlays.md) — Provides a tooltip directive that reveals small information overlays on hover. ([source](http://mgcrea.github.io/angular-strap)) - [Dropdown Selection Components](https://awesome-repositories.com/f/user-interface-experience/layout-utilities/presentation-engines/list-rendering/dropdown-selection-components.md) — Ships a select directive that renders dropdown lists from arrays and binds chosen values. ([source](https://mgcrea.github.io/angular-strap)) - [Modal Dialogs](https://awesome-repositories.com/f/user-interface-experience/modal-dialogs.md) — Displays modal dialogs, side panels, and alert banners that open and close programmatically. - [Scroll-Aware Behaviors](https://awesome-repositories.com/f/user-interface-experience/navigation-scrolling-tools/scroll-navigation/scroll-aware-behaviors.md) — Pins elements on scroll and highlights navigation items based on scroll position. - [Popover Overlays](https://awesome-repositories.com/f/user-interface-experience/overlay-components/popover-overlays.md) — Ships a popover directive that displays content overlays on tap, controllable programmatically. ([source](http://mgcrea.github.io/angular-strap)) - [Scroll Pinning Utilities](https://awesome-repositories.com/f/user-interface-experience/scroll-animations/scroll-pinning-utilities.md) — Provides a scroll-pinning directive that fixes elements in place during scroll ranges. ([source](http://mgcrea.github.io/angular-strap)) - [Scroll-Activated Navigation Highlights](https://awesome-repositories.com/f/user-interface-experience/scroll-interaction-handlers/scroll-state-controllers/scroll-restoration/scroll-position-maintenance/named-scroll-position-jumps/scroll-activated-navigation-highlights.md) — Provides a scroll-spy directive that highlights navigation items based on scroll position. ([source](https://mgcrea.github.io/angular-strap)) - [Tabbed Content Panes](https://awesome-repositories.com/f/user-interface-experience/tabbed-content-panes.md) — Ships a tab directive that switches between content panes with tab functionality. ([source](https://mgcrea.github.io/angular-strap)) - [Time Picker Inputs](https://awesome-repositories.com/f/user-interface-experience/time-picker-inputs.md) — Provides a timepicker directive that shows time selection lists on text inputs with locale support. ([source](http://mgcrea.github.io/angular-strap)) - [Bootstrap](https://awesome-repositories.com/f/user-interface-experience/widget-frameworks/bootstrap.md) — AngularJS directives that turn Bootstrap 3 markup into interactive widgets. - [Modal Side Panels](https://awesome-repositories.com/f/user-interface-experience/admin-panel-extensions/custom-content-panels/data-view-side-panels/modal-side-panels.md) — Provides a side panel directive that opens drawer-style panels with modal behavior. ([source](http://mgcrea.github.io/angular-strap)) - [Collapsible Panels](https://awesome-repositories.com/f/user-interface-experience/collapsible-panels.md) — Transitions panels between collapsed and expanded states, allowing multiple panels to stay open. ([source](https://mgcrea.github.io/angular-strap)) - [Active Link Highlighting](https://awesome-repositories.com/f/user-interface-experience/links/link-styling/active-link-highlighting.md) — Automatically toggles an active state on navigation items based on the current route. ([source](https://mgcrea.github.io/angular-strap)) - [Dismissible Alert Banners](https://awesome-repositories.com/f/user-interface-experience/notification-banners/site-banners/dismissible-alert-banners.md) — Displays styled, dismissible notification bars with configurable placement and type. ([source](http://mgcrea.github.io/angular-strap)) - [Toggle Buttons](https://awesome-repositories.com/f/user-interface-experience/toggle-buttons.md) — Ships a toggle directive that switches buttons between checked and unchecked states. ([source](https://mgcrea.github.io/angular-strap))