How to install bulma-tagsinput extension in Angular project?

Question

I am trying to install bulma-tagsinput in my Angular project without success.

Below the steps I did:

1. Install the package with npm i bulma-tagsinput
2. Declare bulma-tagsinput.min.js in my angular.json

"scripts": ["./node_modules/bulma-tagsinput/dist/js/bulma-tagsinput.min.js"]

3. In my main.ts, import the extension and run the attach command

import * as bulmaTagsinput from 'bulma-tagsinput';

bulmaTagsinput.attach();

4. Add the extension in my sass file after bulma

@import "~bulma";

@import '~bulma-tagsinput/dist/css/bulma-tagsinput';

5. See the result in text and not in tags

Is there something else to do?

Answer 1

I found a way to add the extension to my project.

The import of the extension and the attach command declaration have to be made in the component where the bulmaTagsinput is used. (not in the main.ts)

For instance:

• foo.component.ts

  import * as bulmaTagsinput from 'bulma-tagsinput';
  
  ngOnInit() {
  
    /* some code */
  
    bulmaTagsinput.attach();
  }
  

• foo.component.html

  <input class="input" type="tags" placeholder="Add Tag" value="Tag1,Tag2,Tag3">
  

BUT

I was not able to get the values of the input after binding it with a form control element. My values were always undefined so I guess bulma-tagsinput is not made to work with Angular...