Aurelia-Bootstrap-Tagsinput

Introduction

An Aurelia Custom Element for the 3rd party addon Bootstrap Tags Input

Screenshots

Screenshots from the demo app

Usage

A quick example of the code in action. Note that the value is available under the value.bind.

<abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>

Available Options

Every options of Bootstrap Tags Input can be called through options.bind="". For the complete list, please visit the official site Bootstrap Tags Input - Options.

NOTE: The picker options can also be defined globally through main.js via a config.options configuration, see Global Options

Examples

regular attribute (View)

<abp-tags-input item-value="id" options.bind="{ itemText: 'label' }"></abp-tags-input>

from the ViewModel

<abp-tags-input options.bind="pickerOptions"></abp-tags-input>

export class Example {
  pickerOptions = {
    itemText: 'label'
  }
}

Available Methods/Functions

Again every single methods which comes with Bootstrap Tags Input are available. For the complete list, please visit the official site Bootstrap Tags Input - Functions.

To have access to the methods/functions, you will need to expose the element itself through element.bind to expose the methods (also note that doing so will also give you access to events, options and methods).

Example

View (exposing the element)

<abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>

ViewModel (calling the method)

export class Example {
  @bindable tag;
 
  tagChanged() {
    this.tag.methods.add('tag1');
  }
}

Available Events

Every events of Bootstrap Tags Input are, as no surprises, available as well. For the complete list, please visit the official site Bootstrap Tags Input - Events.

To have access to the events, you will need to expose the element itself through element.bind to expose the methods (also note that doing so will also give you access to events, options and methods).

Note The events are called with the syntax of onEvent which differs from the original syntax. Example, for the beforeItemAdd, we would use the onBeforeItemAdd event.

Example

View (exposing the element)

<abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>

ViewModel (calling the onEvent trigger)

export class Example {
  tagChanged() {
    this.tag.events.onBeforeItemAdd = (e) => console.log('onBeforeItemAdd');
    this.tag.events.onBeforeItemRemove = (e) => console.log('onBeforeItemRemove');
    this.tag.events.onItemAdded = (e) => console.log('onItemAdded');
    this.tag.events.onItemAddedOnInit = (e) => console.log('onItemAddedOnInit');
    this.tag.events.onItemRemoved = (e) => console.log('onItemRemoved');
  }
}

Bootstrap 4

Since Bootstrap is in the middle of updating to version 4, we might as well support it. To give flexibility, an extra option (bootstrapVersion) was added to the config. The default is set to version 3, for more detail see Global Options

Example

.plugin('aurelia-bootstrap-tagsinput', config => { config.extra.bootstrapVersion = 4; });

Installation

You can run the examples or build your own by doing the following.

Aurelia-CLI / Webpack

npm install --save aurelia-bootstrap-tagsinput

Aurelia-CLI

For CLI you will need to add (bootstrap-tagsinput and aurelia-bootstrap-tagsinput) to your aurelia.json file.

{
  "name": "bootstrap-tagsinput",
  "path": "../node_modules/bootstrap-tagsinput",
  "main": "dist/bootstrap-tagsinput.min",
  "resources": [
    "dist/bootstrap-tagsinput.css"
  ]
},
{
  "name": "aurelia-bootstrap-tagsinput",
  "path": "../node_modules/aurelia-bootstrap-tagsinput/dist/amd",
  "main": "index",
  "resources": [
    "**/*.{css,html}"
  ]
},

index.html

<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">

Aurelia (main.js)

Make the plugin available globally in your main.js file. Please note the exported class is abp-tags-input.

For WebPack only (main.js)

import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css';

CLI/WebPack (main.js)

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-bootstrap-tagsinput')
    .feature('resources');
 
  aurelia.start().then(() => aurelia.setRoot());
}

Note on aurelia-webpack-plugin 2.0

If you started using the new aurelia-webpack-plugin version 2.0, which is currently in RC Pre-Release and is already packaged in some of the Aurelia Skeletons (not all). You will have to use the PLATFORM.ModuleName wrapper. The previous code becomes:

aurelia.use.plugin(PLATFORM.moduleName('aurelia-bootstrap-tagsinput'));

Global Options

You can change any of the global options directly in the main.js through a config as shown below:

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-bootstrap-tagsinput', config => {
      // extra attributes, with config.extra
      config.extra.bootstrapVersion = 4;
 
      // or any picker options, with config.options
      config.options.tagConfirmKeys = [13, 44]
    });
 
  aurelia.start().then(() => aurelia.setRoot());
}

or with aurelia-webpack-plugin 2.0 :

export function configure(aurelia) {
  aurelia.use.standardConfiguration().developmentLogging();
  aurelia.use.plugin(PLATFORM.moduleName('aurelia-bootstrap-tagsinput'), config => {
    // extra attributes, with config.extra
    config.extra.bootstrapVersion = 4;
 
    // or any picker options, with config.options
    config.options.tagConfirmKeys = [13, 44]
  });
  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

License

MIT License

Contributions/Comments

Contributions are welcome. This plugin was created to help the community (and myself), if you wish to suggest something and/or want to make a PR (Pull Request), please feel free to do so.

Use it, like it?

You like and use an Aurelia-Bootstrap-Plugins, please click on the ⭐️ and spread the word.