brakebein / ngx-tagify Goto Github PK

Not working with angular 11

when i try to build Angular 11, and when I run it, get this error.

Uncaught ReferenceError: Cannot access 'qe' before initialization.

version:
"ngx-tagify": "0.7.6"

Can not call placeCaretAfterNode, below is my code snippet:

addTagsToForm() {
    let value = "My Tag";
    let tag: TagData = { value: value };
    let tagElement = this._tagifyService.get("MixedTagArea").createTagElem(tag);
    this._tagifyService.get("MixedTagArea").injectAtCaret(tagElement);
    let elementAfterTag = this._tagifyService
      .get("MixedTagArea")
      .insertAfterTag(tagElement, "");
    this._tagifyService
      .get("MixedTagArea")
      .placeCaretAfterNode(elementAfterTag);
  }

The reason not use addTags is that I used a button to trigger addTagsToForm() and I want to place caret after insert tags.

Please help.

I am getting the following issue. while running the code.

 

[{
	"resource": "/f:/Development/learn angular/tag-app/src/app/app.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"code": "2322",
	"severity": 8,
	"message": "Type 'TagifySettings<UserTag>' is not assignable to type 'TagifySettings<TagData>'.\n  Types of property 'templates' are incompatible.\n    Type 'Templates<UserTag> | undefined' is not assignable to type 'Templates<TagData> | undefined'.\n      Type 'Templates<UserTag>' is not assignable to type 'Templates<TagData>'.\n        Types of property 'wrapper' are incompatible.\n          Type '((this: Tagify<...>, input: HTMLInputElement | HTMLTextAreaElement, settings: TagifyRuntimeSettings<UserTag>) => string) | undefined' is not assignable to type '((this: Tagify<...>, input: HTMLInputElement | HTMLTextAreaElement, settings: TagifyRuntimeSettings<TagData>) => string) | undefined'.\n            Type '(this: Tagify<...>, input: HTMLInputElement | HTMLTextAreaElement, settings: TagifyRuntimeSettings<UserTag>) => string' is not assignable to type '(this: Tagify<...>, input: HTMLInputElement | HTMLTextAreaElement, settings: TagifyRuntimeSettings<TagData>) => string'.\n              The 'this' types of each signature are incompatible.\n                Type 'Tagify<TagData>' is not assignable to type 'Tagify<UserTag>'.\n                  The types of 'settings.templates.wrapper' are incompatible between these types.\n                    Type '(this: Tagify<...>, input: HTMLInputElement | HTMLTextAreaElement, settings: TagifyRuntimeSettings<TagData>) => string' is not assignable to type '(this: Tagify<...>, input: HTMLInputElement | HTMLTextAreaElement, settings: TagifyRuntimeSettings<UserTag>) => string'.\n                      The 'this' types of each signature are incompatible.\n                        Type 'Tagify<UserTag>' is not assignable to type 'Tagify<TagData>'.\n                          The types of 'settings.templates.tag' are incompatible between these types.\n                            Type '(this: Tagify<UserTag>, tagData: UserTag, tagify: Tagify<UserTag>) => string' is not assignable to type '(this: Tagify<TagData>, tagData: TagData, tagify: Tagify<TagData>) => string'.\n                              Types of parameters 'tagData' and 'tagData' are incompatible.\n                                Type 'TagData' is not assignable to type 'UserTag'.",
	"source": "ngtsc",
	"startLineNumber": 4,
	"startColumn": 12,
	"endLineNumber": 4,
	"endColumn": 20,
	"relatedInformation": [
		{
			"startLineNumber": 8,
			"startColumn": 74,
			"endLineNumber": 8,
			"endColumn": 96,
			"message": "Error occurs in the template of component AppComponent.",
			"resource": "/f:/Development/learn angular/tag-app/src/app/app.component.ts"
		}
	]
}]

Please help on this issue.

While trying to include in angular 16.0 it gives me the following error. It seems like incompability of the rxjs lib.

/node_modules/ngx-tagify/fesm2020/ngx-tagify.mjs:159:4-16 - Error: export 'throttleTime' (imported as 'throttleTime') was not found in 'rxjs' (possible exports: ArgumentOutOfRangeError, AsyncSubject, BehaviorSubject, ConnectableObservable, EMPTY, EmptyError, GroupedObservable, NEVER, Notification, NotificationKind, ObjectUnsubscribedError, Observable, ReplaySubject, Scheduler, Subject, Subscriber, Subscription, TimeoutError, UnsubscriptionError, VirtualAction, VirtualTimeScheduler, animationFrame, animationFrameScheduler, asap, asapScheduler, async, asyncScheduler, bindCallback, bindNodeCallback, combineLatest, concat, config, defer, empty, forkJoin, from, fromEvent, fromEventPattern, generate, identity, iif, interval, isObservable, merge, never, noop, observable, of, onErrorResumeNext, pairs, partition, pipe, queue, queueScheduler, race, range, scheduled, throwError, timer, using, zip)

Do I need to install original @yaireo__tagify library to make it work?

please add a feauture to set max tags a user can enter.

Hi, does the autocomplete is supposed to work in the input field as you type ? Like in here for example : tagify

Can't make it work with this tagify Angular wrapper.

Example in this image of what it is supposed to do :

Hi!

Do you have any example of how to do this in angular?

Thanks!

Brakebein can you guide me in updating the whitelist on scroll event of the suggestion dropdown

Hi, can you update the peer dependencies for angular 14?

Currently when I try to do an npm install on angular 14 project I get this error

npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"^14.1.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^13.3.11" from [email protected]
npm ERR! node_modules/ngx-tagify
npm ERR!   ngx-tagify@"^0.7.2" from the root project 

Hi

I am trying to use ngx-tagify in IE11 with whitelist. I am able to see my whitelist data in dropdown but on clicking on the item, nothing is happening.

I also included tagify.polyfills.min.js from @yairEO\tagify\dist but still it is not working. I can see

merge(
     fromEvent(this.tagify, 'add'),
     fromEvent(this.tagify, 'remove')
   )

not firing.

can you please help me out here? Thanks a lot in advance.

Hi, I'm using Ionic + Angular and the library doesn't work, it show very extrange (see image). I'm trying to use it with reactive forms.

<tagify formControlName="email"></tagify>

newClintForm = new FormGroup({
  identificationType: new FormControl('', Validators.required),
  indentification: new FormControl('', Validators.required),
  name: new FormControl('', Validators.required),
  socialReazon: new FormControl('', Validators.required),
  address: new FormControl('', Validators.required),
  email: new FormControl([], [Validators.email, Validators.required]),
  phone: new FormControl('', Validators.required)
})

Getting the following error while compilation. I added scss to my angular.json and done all the necessary imports and configurations.

Error: ./node_modules/ngx-tagify/styles/tagify.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Undefined function. ╷ 267 │ $size: math.div(-$tagMargin, 2); │ ^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules\@yaireo\tagify\src\tagify.scss 267:28 @import node_modules\ngx-tagify\styles\tagify.scss 1:9 root stylesheet

[IMAGE]

I am updating the tags in white list based on pagination on a button click
how can i trigger the dropdown on white list change

Hi,
I am getting the error in Property 'elm' does not exist on type 'DropDownSelectEventData'.ts(2339) in dropdown:select property of callback. I am using tagify in angular. (Image attached)

I am following the same code suggested in https://github.com/Brakebein/ngx-tagify/blob/master/src/app/example-templates/example-templates.component.ts

Please Advice me to solve the error

I'm currently working on an Angular project and I have a tagify tag in my component.

These are the settings for my tagify:

It is a mix mode tagify. When I edit an item, I need to put the message text on the tagify input. How can I do that? Can you give me some insights?

Thanks,

{
mode: 'mix',
pattern: /@|#|~|%|&|-/
}

tags.find is not a function

I recently start facing "content is not defined" issue while I am adding Tag programmatically using "tagifyService.get("xyz").addMixTags([{ value: tagId, text: tagValue, title: tagValue, type: tagType }])".

I just updated tagify to 16.1.2 and now I'm facing this issue ... any advice ?

Module build failed (from ./node_modules/@angular-devkit/build-angular/node_modules/sass-loader/dist/cjs.js):
Can't find stylesheet to import.
  ╷
1 │ @import "@yaireo/tagify/src/tagify";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules/ngx-tagify/styles/tagify.scss 1:9  root stylesheet

Angular version: 13.2.3
ngx-tagify version: 0.7.3
yaireo/tagify version: 4.17.7

I am using mixed tag and adding the tags using injectAtCaret() (from tagify service) when the user clicks a button.

The problem is that if I try to read the value of the respective form control after adding a tag, it is not showing correctly. But if I enter any text somewhere in the input and read the form control value it is getting updated correctly.

Here is a live example.

@Brakebein Is there any way to read the updated value of form control using the tagify component or Can you please provide any workaround to fix this issue? Since we use Angular 13 and cannot upgrade to new ngx-tagify packages since it requires Angular 13+

Thanks!

Hey is it possible to get a tagify input with mix mode without using a textarea? I searched in your and yairEOs Documentation but can not find anything about it.