aurelia-bootstrap-tagsinput

Aurelia-Bootstrap-Tagsinput

Introduction

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

Usage

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

<aba-tags-input element.bind="tag" model.bind="post.categories"></aba-tags-input>

Available Attributes/Options

Every single options that are part of Bootstrap Tags Input are available as bindable or as regular attributes. For the complete list, please visit the official site Bootstrap Tags Input - Options. There is 2 ways to call options (with a bind attribute or as a regular attribute).

Example

regular attribute (View)

<aba-tags-input item-value="id" item-text="label"></aba-tags-input>

bind attribute (View + ViewModel)

<aba-tags-input confirm-keys.bind="tagConfirmKeys"></aba-tags-input>

export class Example {
    tagConfirmKeys = [13, 44];
}

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)

<aba-tags-input element.bind="tag" model.bind="post.categories"></aba-tags-input>

ViewModel (calling the method)

export class Example {
  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)

<aba-tags-input element.bind="tag" model.bind="post.categories"></aba-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');
  }
}

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)

Make the plugin available globally in your main.js file. Please note the exported class is aba-tags-input (aba stands for Aurelia-Bootstrap-Addon)

// for WebPack only, also import CSS 
// import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-bootstrap-tagsinput')
    .feature('resources');

  aurelia.start().then(() => aurelia.setRoot());
}