bootstrap-angular-multiselect

A standalone Angular implementation of the PrimeNG MultiSelect component, rebuilt from the ground up to use Bootstrap as its only external dependency.

🚀 Goal

The primary goal of this project is to provide a lightweight, Bootstrap-native alternative to the PrimeNG MultiSelect while maintaining 1:1 API parity. This allows developers to transition between packages seamlessly without changing component logic or template structures.

• Source Code: rmcclell/bootstrap-angular-multiselect
• Original Blueprint: PrimeNG Official Site

🛠 Features

• Zero PrimeNG Overhead: No need to import primeng or primeicons.
• Bootstrap Driven: Uses standard Bootstrap 5 classes for styling and layout.
• Identical API: Every @Input() and @Output() is mirrored from the original documentation.
• Template Support: Supports custom content projection for items, headers, and footers.

📋 API Mirror

This library implements the PrimeNG API exactly to ensure compatibility:

Input / Output	Type	Description
options	any[]	An array of objects to display as options.
optionLabel	string	Property name to use as the label.
optionValue	string	Property name to use as the value.
filter	boolean	Whether to show the search/filter input.
display	string	Defines how to show selected items (comma or chip).
onChange	EventEmitter	Callback to invoke when value changes.

🤝 Attribution & Credit

This project is a Bootstrap-based port of the MultiSelect component developed by PrimeTek.

We extend our deep gratitude to the PrimeNG Team for their industry-leading UI/UX patterns. This implementation follows the functional logic established by the original creators to ensure a familiar developer experience.

🤖 Built with Intelligence

This project’s documentation, deployment architecture, and GitHub integration were refined with the assistance of Google Antigravity Editor and Gemini. These tools helped ensure the Bootstrap-native implementation maintains strict PrimeNG API parity while streamlining the transition to a standalone Angular architecture.

Bootstrap Angular MultiSelect

A lightweight, standalone Angular version of the PrimeNG MultiSelect designed to work exclusively with Bootstrap.

🌟 Why this exists?

Standard PrimeNG components often require a large suite of dependencies (primeng, primeicons, primeflex). This project provides a 1:1 API mirror of the MultiSelect component, stripped down to use only Bootstrap 5 for styling. It’s perfect for projects that want the PrimeNG developer experience without the extra bundle bloat.

🚀 Live Demo

Check out the component in action, styled entirely with Bootstrap.

📦 Installation

npm install bootstrap-angular-multiselect

Screeshot of Demo

---

Maintained by rmcclell. Licensed under MIT.

This project was generated using Angular CLI version 21.1.2.

Development server

To start a local development server, run:

npm start
# or
npx ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

ng generate --help

Building

To build the project run:

npm run build
# or
npx ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Vitest test runner, use the following command:

npm test
# or
npx ng test

Running end-to-end tests

For end-to-end (e2e) testing, run:

ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.