Angular2: how to use bootstrap-tagsinput properly

javascript angularjs angular systemjs bootstrap-tags-input
DavidL picture DavidL · Jul 24, 2016 · Viewed 7.4k times · Source

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

jayesh picture jayesh · Jul 29, 2016

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

Related questions

Angular 2: Callback when ngFor has finished

In Angular 1 I have written a custom directive ("repeater-ready") to use with ng-repeat to invoke a callback method when the iteration has been completed: if ($scope.$last === true) { $timeout(() => { $scope.$parent.$parent.$eval(someCallbackMethod); }); } Usage in markup: <li …

Read More
How to Unit Test a Directive In Angular 2?

Problem: I would like to be able to unit test a directive in Angular 2 to make sure that it properly compiles. In Angular 1, it was possible to use$compile(angular.element(myElement) service and call $scope.$digest() after that. I …

Read More
What's the equivalent of Angular's $q in Angular2?

What's the equivalent of Angular's $q in Angular2? Specifically, I'm looking for $q.when, which allowed you to do something like: return $q.when(['TestResponse']);

Read More