Angular usage

[skined90]

Can someone please explain how to use this library with Angular.

When I add <tagify></tagify> inside component HTML I'm getting next error:
`error NG8001: 'tagify' is not a known element:

1. If 'tagify' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
   `
   I tried to import Tagify and TagifyService into modules and providers inside app.module.ts but still the same. I've searched the documentation and other issues but still don't see how to start using it in Angular app.

[yairEO]

Hello my dear Serbian friend!

I have zero experience with Tagify and a friend helped me make the Angular wrapper over a year and a half ago, and I have no idea if it even works now.

If it is indeed broken, then I would have to look for someone who knows Angular to fix it for me, because I cannot learn Angular just for this, it would be too much of an effort

[maheee]

I've figured out how it works. The angular integration is delivered as source, not as compiled module. You have to do the following to make it work:

• add "node_modules/@yaireo/tagify/dist/*.ts" to the include section of your tsconfig.app.json
• add node_modules/choices.js/public/assets/scripts/choices.min.js and node_modules/choices.js/public/assets/styles/choices.min.css to scripts/styles section in angular.json
• add TagifyComponent to declarations section in a module and TagifyService to providers section

after that, <tagify [settings]="settings"></tagify> should work.
But you have to provide settings, otherwise it isn't initialized.

There are still 2 problems:

• The singleton service doesn't really make sense because you could have multiple instances of the component
• There is a typo in the Settings interface and it seems out of date anyway.

I'll test a little more and provide a MR for the 2 problems.

I really like tagify btw 👍 I'll probably replace choices.js for tagging at least.

[mahakaal]

@maheee I'm going to try your solution. Do you know if this tagify wrapper works with formcontrol?

[yairEO]

@maheee - someone else contributed to Tagify the piece of code for Angular since I do not know Angular, I had to trust the contributor's code.

If it's possible, I would be happy if you could make a PR to improve the Angular wrapper!

[maheee]

@maheee I'm going to try your solution. Do you know if this tagify wrapper works with formcontrol?

Don't think it does. It'd have to implement the ControlValueAccessor interface to work with form control.

[mahakaal]

@maheee I'm going to try your solution. Do you know if this tagify wrapper works with formcontrol?

Don't think it does. It'd have to implement the ControlValueAccessor interface to work with form control.

Yeah I confirm this solution is not viable with form control or whatsoever... I need to have an input for tags with formcontrol, can you suggest what should I do/what to use please?

[maheee]

If I remember correctly, you really only have to implement this interface to make it work in forms:
https://angular.io/api/forms/ControlValueAccessor

[akaco]

• TagifyService

Thanks for you explain I just run some test here codesandbox

[Brakebein]

Half a year ago, I have started using tagify in my project (thanks for this great library). However, the existing Angular integration that comes with this library had some pitfalls: no multiple instances possible (I just see, this seems be fixed by now), the way you need to integrate it to your app, CSS classes are not applied to the input element, etc.

That's why I created a proper Angular library. It allows multiple instances of tagify, implements ControlValueAccessor (so you can use it with ngModel and reactive forms), comes with proper type declaration, a demo app. Finally, I had some time to polish and publish it to npm.

So, Angular users may want to check it out: ngx-tagify
(and may give feedback if something is missing)

I didn't make a PR as @yairEO has often requested it here. I think it is not good practice to have lots of integrations along with the core library in one repository, especially when it comes to more complex libraries/frameworks such as Angular. The (dev) dependencies and supportive files that are needed to develop, build, and test the Angular library would be an overkill for the core library and should not bother users that are not using the Angular integration. In the end, I followed the official documenation for creating and publishing an Angular library.

[ayoubkhan558-zz]

Half a year ago, I have started using tagify in my project (thanks for this great library). However, the existing Angular integration that comes with this library had some pitfalls: no multiple instances possible (I just see, this seems be fixed by now), the way you need to integrate it to your app, CSS classes are not applied to the input element, etc.

That's why I created a proper Angular library. It allows multiple instances of tagify, implements ControlValueAccessor (so you can use it with ngModel and reactive forms), comes with proper type declaration, a demo app. Finally, I had some time to polish and publish it to npm.

So, Angular users may want to check it out: ngx-tagify
(and may give feedback if something is missing)

I didn't make a PR as @yairEO has often requested it here. I think it is not good practice to have lots of integrations along with the core library in one repository, especially when it comes to more complex libraries/frameworks such as Angular. The (dev) dependencies and supportive files that are needed to develop, build, and test the Angular library would be an overkill for the core library and should not bother users that are not using the Angular integration. In the end, I followed the official documenation for creating and publishing an Angular library.

also getting error using ngx-tagify. Please help.

[Brakebein]

also getting error using ngx-tagify. Please help.

Please address issues about ngx-tagify at the respective repository. You have already opened an issue there (Brakebein/ngx-tagify#1).

[yairEO]

@Brakebein - why did you copied my library instead of contributing to the already-existing Angular port?

please mind that it is for the best to have Tagify managed by me and not have copies all around the internet which might not be up-to-date or with proper documentation, as I keep changing things in my own codebase

[Brakebein]

Few posts above, I stated the main reason for creating an extra repository and npm package:

I think it is not good practice to have lots of integrations along with the core library in one repository, especially when it comes to more complex libraries/frameworks such as Angular. The (dev) dependencies and supportive files that are needed to develop, build, and test the Angular library would be an overkill for the core library and should not bother users that are not using the Angular integration. In the end, I followed the official documenation for creating and publishing an Angular library.

I didn't copy your library. The core Tagify library is just an dependency. I found that the Angular wrapper that comes with your library is insufficient in some ways and was not following best practices of Angular. So, I started developing my own Angular wrapper, and after some time I decided to publish it. Maybe I also got a little bit motivated to do so, since in issues concerning Angular, you always stated that you couldn't help very much.
I basically followed this guide for creating an Angular library. Have a look at the dependencies in the root package.json. I don't think you want to deal with all this overhead just to take care of this Angular integration (incl. testing and building). Apart from that, the small demo app and its code gives additional hints on how to use it with Angular.

For all other libraries that I use in my projects, I haven't seen it yet that a vanilla JS library provides its own Angular (or React) integration. In the Angular ecosystem, it's common that these wrappers or integrations are dedicated repos/packages. So, things are kept separate. The core library developer can focus on its core library and users of this core library (who don't use Angular etc.) download a smaller package size (remember that you were also concerned about package size #531 (comment)). The Angular developer can focus on the Angular stuff, tracks changes of the core library (i.e. dependency updates), makes sure that it will also work with future releases of Angular, can react to Angular specific issues. Stuff the core library shouln't bother about. The one library depends on the other library without any code duplicates.

So, please don't take offence that I made an extra repo/package. I just want to follow best practices (to the best of my knowledge).

[yairEO]

The core library developer can focus on its core library and users of this core library (who don't use Angular etc.) download a smaller package size (remember that you were also concerned about package size #531 (comment)). The Angular developer can focus on the Angular stuff

While it does makes sense in a perfect world, in reality it can actually cause problems such as multiple developers create their own wrappers and then you have choices with varying degree of quality and maintainability, and a user who googles: "angular tags" might be confused, coming to one of these and it might not work or who knows what.. I would prefer to an an "official" place where I can vouch for the quality

But it's true that I don't have the knowledge or capacity to deal with Angular specifically, since it's such an complex thing to master.. but I also feel sadness and shame the Angular port here in my repository is of such crap quality while others are better, and there's nothing I can do about it, so this is why I was hoping all this time somebody will help fix this with a pull request, but nobody offered..

[Brakebein]

So, what is the conclusion now? I agree that users may get confused, if they find different implementions. What would you think this "official" place would look like?
I prefer to keep the Angular wrapper in an extra repo/package for the many reasons mentioned above, but I wouldn't mind to transfer ownership in order to make it more "official" (as long as I still have access to commit and publish).

[yairEO]

@Brakebein - The problem with transferring ownership is that I myself cannot guarantee the code to work, so again if the Angular port breaks, I don't know who will randomly come to fix it and when.

What if I remove the Angular port from this repo and simply provide a link to your repo? would you be available to fix the wrapper if it stops working due to potential changes in Tagify's source code?

[Brakebein]

I'm already watching your repo and my plan was anyway, if you publish a new release, to look for changes that would break anything in the wrapper and to adapt the code accordingly. When keeping the ownership of my repo, I would, of course, feel even more responsible that everything works. So, I would be fine with your suggestion and it wouldn't change very much for me.

Just say if I should specifically point something out in the readme. I hope references to your repo are already strong enough.