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!

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