Angular2: how to use bootstrap-tagsinput properly

Question

I'm trying to use bootstrap-tagsinput library in my Angular2 project. The library is installed using package.json file:

  "dependencies": {
    ...
    "bootstrap-tagsinput": "^0.7.1",
    ...
  }

Now I have a bootstrap-tagsinput folder in node_modules. I want to use tagsinput in a specific component. I saw there is a bootstrap-tagsinput-angular.js file in the node_modules/bootstrap-tagsinput/dist directory, but I can't managed to use it properly.

Am I supposed to add the JS file in my index.html so bootstrap-tagsinput will be available for all components? Or is there a way to import it just where it is needed?

In other way, is there a way to do something like this:

mycomponent.component.html:

<input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput"/>

mycomponent.component.ts:

import {Component, AfterViewInit} from '@angular/core';
import {TagsInputComponents} from 'bootstrap-tagsinput'; // Something like that?!?

@Component({
    ...
})

export class MyComponentComponent implements AfterViewInit {

    ngAfterViewInit():any {
        $('input').tagsinput('refresh');
    }
}

thanks a lot for your help!

Prolusion

Answer 1

I can see some issue in using bootstrap-tags-input with angular batter to use ngTagsInput if you using angular.

Please see more details at : ngTagsInput , demo

Lammastide

can we use ngTagsInput with Angular 2? – Kinkajou

Answer 2

the boostrap-tagsinput is a directive. So you can need somethings as follow:

Step 1: Import boostrap-tagsinput

import {TagsInputComponents} from 'bootstrap-tagsinput';

Step 2: Add to directives

@Component({
    ...
    directives: [TagsInputComponents],
    ...
})

then use it in your view.

Hope this help!

Craner

Cannot check right now but import {TagsInputComponents} from 'bootstrap-tagsinput'; was not a valid syntax (error in my IDE - Webstorm). Have you managed to use the component this way personnaly? – Prolusion

You can either convert boostrap-tagsinput to use in angular2 or use angular2-tag-input at here – Craner

Answer 3

For anyone looking for an easier solution. I ended up using angular2-tag-input

First you'll have to run your node command prompt

npm install angular2-tag-input --save

Then include it in your module

// In one of your application NgModules
import {RlTagInputModule} from 'angular2-tag-input';


    @NgModule({
      imports: [
        RlTagInputModule
      ]
    })


// In one of your component templates
<rl-tag-input [(ngModel)]="tags" placeholder="Testing placeholder"></rl-tag-input>

// In one of your component ts file
var tags= ['tag1','tag2','tag3']

Kinkajou