brakebein / ngx-tagify Goto Github PK
View Code? Open in Web Editor NEWAngular library that wraps https://github.com/yaireo/tagify/
License: MIT License
Angular library that wraps https://github.com/yaireo/tagify/
License: MIT License
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 :
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
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
{
mode: 'mix',
pattern: /@|#|~|%|&|-/
}
tags.find is not a function
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.
@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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.