Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Tagify and Angular


Hi guys,

I'm trying to use tagify in my angular project but I'm not able to.

This is what I'm doing,

By reading the doc and also checking the code, apparently the CSS is already included in the project, so I'm not including anything in the angular.json

So I npm install tagify

In my angular component I have

@ViewChild("tagInput") tagInput: ElementRef;
private tagifyInput: Tagify;

ngAfterViewInit() {
// Access the native input element
const inputElement: HTMLInputElement = this.tagInput.nativeElement;

// Initialize Tagify
this.tagifyInput = new Tagify(inputElement, {
// Tagify options go here
});
}


Html

<input #tagInput placeholder="Type and press Enter" value="tag1, tag2 autofocus">


I can see the input text but it will show a json value like
[{"value":"tag1"},{"value":"tag2 autofocus"}]

What I'm missing ?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)


Never mind I manage to get it working



Great to hear that you managed to get it working! If you have any more questions or need further assistance in the future, feel free to reach out.



Hola Felipe! estoy teniendo el mismo problema, serías tan amable de compartir con la comunidad la forma en la que lo resolviste?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(