gbuomprisco / ngx-chips

Tag Input component for Angular

Ciao! This is Giancarlo 👋

Coder and Founder. I ship products, and help others do the same.

I'm a developer and founder based in London, UK Remote

I'm particularly specialized in using Typescript, Angular, Rx, NestJS, Next.js and React.

I made https://makerkit.dev, a SaaS Starter for Next.js and Remix to ship your SaaS fast.

Sometimes, I blog at https://giancarlobuomprisco.com

ngx-chips's Issues

Keyboard Keys

What do these values correspond to? Are they ASCII values? Are they keyboard codes? Are they platform specific?

How would I go about making a comma a code to separate the tags?

Any help would be appreciated! Thanks!

Case Insensitive for autocomplete tags

First of all: Congratulations! It's a really precious project!!!
And,.. how could I disable case sensitive for autocomplete tags?

Thanks.
Igor

Add an option to specify dropdown placement

I have a TagInput at the bottom of my page, which means the dropdown for autocomplete is mostly hidden, I can only see the top row. It would be great to have an option to choose its placement.

Temporary solution is to move it in an AfterViewChecked callback, which is not great.

angular2 rc5 integration

How to use in angular2 rc5? bootstrap model has been changed.
How to use with NgModule?

When <tab> is pressed and the last tag is selected, the input should be focused

Cannot find name 'require'. in index.ts

Thank you, the project is excellent.

I encounter a problem during compilation.

[default] /client/node_modules/ng2-tag-input/index.ts:1:20
Cannot find name 'require'.
[default] Checking finished with 1 errors

Is there anything i miss in my node modules ?

The autocomplete is not working with uppercase

My autocomplete array is ["Item1", "item2", "item3"]
When I type either "i" or "I" the popup always displays only item2 and item3.

How to import your module reference in systemjs.config.js?

Update Webpack Bin Demo to latest version

make the borders optional

This is purely a styling issue. I can't think of a way that I can override the css styling on the component to remove the input borders that IMO make it unnecessary big. Besides, in my app, the close buttons appear slightly misplaced (http://pasteboard.co/2YSDQYkK1.png) which I suspect is due to some interaction with my own stylesheet. Problem is, short of forking the entire component, I don't know how to fix it.

Just making the borders optional would be great for now. But Angular 2 really needs a to figure out an unintrusive way to override the style of reusable components.

Facing issue in loading the index.js file

Hi,
I am using 0.3.7 version, I couldnot able to load .js file. Can someone please help me on this?

Thanks in advance

How to pass an array of object to autocomplete and specify the property to display?

Hi,

Thank you for your hard work. The component is very nice and simply.

But I faced with the next requirement on my project to pass an array of object inside of [autocompleteItems] and specify a property to display/search like this:

<tag-input [onlyFromAutocomplete]="true" [autocompleteItems]="[{name: 'Item1', id: 1}, {name: 'Item2', id: 2}]" [autocompleteDisplayProperty]="'name'" // display property name [autocomplete]="true" [ngModel]="tags"> </tag-input>

Do you have similar features?

Regards,
Dmytro

angular2 rc6 integration (systemjs)

Would you please upgrade to support angular-rc6?

zone.js:484 Unhandled Promise rejection: Template parse errors:
'delete-icon' is not a known element:
1. If 'delete-icon' is an Angular component, then verify that it is part of this module.
2. If 'delete-icon' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

            <!-- remove 'x' button -->
            [ERROR ->]<delete-icon class="tag__remove-button"
                  aria-label="Remove tag"
                  ("): TagInput@29:12
Can't bind to 'focusFirstElement' since it isn't a known property of 'ng2-dropdown-menu'.
1. If 'ng2-dropdown-menu' is an Angular component and it has 'focusFirstElement' input, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("
        <div *ngIf="autocomplete">
            <ng2-dropdown>
                <ng2-dropdown-menu [ERROR ->][focusFirstElement]="false"
                                   (keydown)="escapeDropdown($event)"
   "): TagInput@54:35
Can't bind to 'value' since it isn't a known property of 'ng2-menu-item'.
1. If 'ng2-menu-item' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("               <ng2-menu-item *ngFor="let item of itemsMatching"
                                   [ERROR ->][value]="item">
                        {{ item }}
                    </ng2-menu-item>
"): TagInput@58:35
'ng2-menu-item' is not a known element:
1. If 'ng2-menu-item' is an Angular component, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("own)="escapeDropdown($event)"
                                   offset="60 0">
                    [ERROR ->]<ng2-menu-item *ngFor="let item of itemsMatching"
                                   [value]="item">
"): TagInput@57:20
'ng2-dropdown-menu' is not a known element:
1. If 'ng2-dropdown-menu' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
        <div *ngIf="autocomplete">
            <ng2-dropdown>
                [ERROR ->]<ng2-dropdown-menu [focusFirstElement]="false"
                                   (keydown)="escapeDr"): TagInput@54:16
'ng2-dropdown' is not a known element:
1. If 'ng2-dropdown' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

        <div *ngIf="autocomplete">
            [ERROR ->]<ng2-dropdown>
                <ng2-dropdown-menu [focusFirstElement]="false"
                       "): TagInput@53:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'delete-icon' is not a known element:
1. If 'delete-icon' is an Angular component, then verify that it is part of this module.
2. If 'delete-icon' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

            <!-- remove 'x' button -->
            [ERROR ->]<delete-icon class="tag__remove-button"
                  aria-label="Remove tag"
                  ("): TagInput@29:12
Can't bind to 'focusFirstElement' since it isn't a known property of 'ng2-dropdown-menu'.
1. If 'ng2-dropdown-menu' is an Angular component and it has 'focusFirstElement' input, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("
        <div *ngIf="autocomplete">
            <ng2-dropdown>
                <ng2-dropdown-menu [ERROR ->][focusFirstElement]="false"
                                   (keydown)="escapeDropdown($event)"
   "): TagInput@54:35
Can't bind to 'value' since it isn't a known property of 'ng2-menu-item'.
1. If 'ng2-menu-item' is an Angular component and it has 'value' input, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message.
 ("               <ng2-menu-item *ngFor="let item of itemsMatching"
                                   [ERROR ->][value]="item">
                        {{ item }}
                    </ng2-menu-item>
"): TagInput@58:35
'ng2-menu-item' is not a known element:
1. If 'ng2-menu-item' is an Angular component, then verify that it is part of this module.
2. If 'ng2-menu-item' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("own)="escapeDropdown($event)"
                                   offset="60 0">
                    [ERROR ->]<ng2-menu-item *ngFor="let item of itemsMatching"
                                   [value]="item">
"): TagInput@57:20
'ng2-dropdown-menu' is not a known element:
1. If 'ng2-dropdown-menu' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown-menu' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
        <div *ngIf="autocomplete">
            <ng2-dropdown>
                [ERROR ->]<ng2-dropdown-menu [focusFirstElement]="false"
                                   (keydown)="escapeDr"): TagInput@54:16
'ng2-dropdown' is not a known element:
1. If 'ng2-dropdown' is an Angular component, then verify that it is part of this module.
2. If 'ng2-dropdown' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("

        <div *ngIf="autocomplete">
            [ERROR ->]<ng2-dropdown>
                <ng2-dropdown-menu [focusFirstElement]="false"
                       "): TagInput@53:12

Include more examples in README

Error: No value accessor for ''

Hi guys,

I am trying to get ng2-tag-input working but is giving me the following error:
platform-browser.umd.js:2306 Error: No value accessor for ''

I have done exactly step by step as explained in github.

this is my code:

<div>
        <h3>Input tag that allows max 3 tags</h3>
        <tag-input [ngModel]="['Javascript', 'Typescript']"
                   [maxItems]="3"
                   placeholder="Insert a new item"></tag-input>
    </div>

@Component({
    moduleId: module.id,
    selector: 'jobform',
    directives: [FILE_UPLOAD_DIRECTIVES, TagInput],
    templateUrl: 'jobform.component.html'
})

Any ideas and help will be much appreciated, thanks.

Kind Regards

Conflicting seperator and validator

Hy,

I have the problem that I use space as a seperator (key 32) for my tags, but I also validate against the following regex: new RegExp('^[a-zA-Z0-9\\-_]+$')
The problem now is that due to space not being allowed in my tags the error message below the input appears, instead of the tag (without the space) being added.
I think this should be changed!

thanks and greetings

CSS conflict

There are some CSS class names in the component like "tag", which may conflict with external libraries' CSS, e.g. Bootstrap (there is also a "tag" class). Eventually your "tag" class dominates over the Bootstrap's one so it looks pretty disgusting.

I recommend you to edit your CSS class names adding no-conflict prefixes, for example:

.n2ti-tag {...}

And even better yet, add the possibility to turn off a component theme completely.

SystemJS builder error

Hi. and thank you for bringing this awesome module to angular 2.

I'm having some problems when I try to build my application with the Systemjs builder, it seems like there's some define errors when importing the module to the build process. I am able to use the module during development (typescript compiles correctly and such) but when I try to make a build it throws the following error:

Unhandled rejection Error on dependency parsing for npm:ng2-tag-input/dist/ng2-tag-input.bundle.js at file:///C:/dev/tagModuleTest/node_modules/ng2-tag-input/dist/ng2-tag-input.bundle.js

    Loading app/app.module.js
    Loading app/main.js
    Error: Multiple anonymous defines.

I've tested this by using a barebone quickstart project from angular to get the bare minimum, I'll zip it down and attach it here for reference.

As angular 2 is pretty new (especially the final release) it's quite hard to get some definitive answers on what is wrong here, I'll try to dig a bit deeper into this and will follow up if I get any eureka moments.

Best Regards,
/ Glenn
tagModuleTest.zip

Failed to npm start

I say an error when I execute "npm start":
[1] 16.10.06 00:08:21 404 GET /node_modules/ng2-tag-input/dist/dist/modules/ng2-tag-input.module.js
[1] 16.10.06 00:08:21 404 GET /node_modules/ng2-tag-input/dist/dist/modules/components/tag-input.js

This is my systemjs.config.js

(function(global) {
// map tells the System loader where to look for things
var map = {
'moment': 'node_modules/moment/moment.js',
'app': 'app', // 'dist',
'@angular': 'node_modules/@angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs',
'ng2-tag-input': 'node_modules/ng2-tag-input/dist'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
'ng2-tag-input': { defaultExtension: 'js', main:'index' },
};

Add onBlur and onFocus events

Allow functionality explained in #46

rl-tag-input max limit

How can we set max limit of tags.

Dropdown is not getting hide

Whenever it displays a dropdown and I press tab key so as to loose current field focus, dropdown keeps on being displayed...

Some small suggestions/fixes

Hi! First off -- great component, much better than my attempt at a tag input.

I have noticed a few things that I thought I'd mention:

• When using an autocomplete, an option to pre-select the first item would be nice, to prevent the user from having to press down->enter, instead of just enter.
• When using an autocomplete with more than a few items, the dropdown that appears can obstruct the rest of the view, and also seems to flicker as it finds whether it should appear above or below the input
  • Maybe an option for maximum number of results to show in the dropdown
  • Maybe an option for minimum number of characters before the dropdown shows
• When using an autocomplete, the backspace behaviour is a bit buggy, most of the time it just re-displays the autocomplete dropdown on keydown, and will never select/remove an earlier tag. If you tab off of the field and shift-tab back to the field, it lets you remove a single tag with backspace before returning to the aforementioned behaviour

[email protected]
[email protected]

NgFormControl Error

Hy,

I have problems trying to implement this component.

The error i get is the following:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngFormModel' since it isn't a known native property ("

    <!-- form -->
    <form (ngSubmit)="add()" *ngIf="input.isVisible.call(this)" [ERROR ->][ngFormModel]="form">
        <input type="text"
               required

I am using the new Angular Form module "@angular/forms": "0.1.1", but I don't know if that is relevant.

Thanks for your help,
FallenRiteMonk

Tag-Input inside 'form' does not render its' tags until input is touched

Hi. I've noticed some issue in component rendering when I placed tag-input inside <form></form>. Initial values are not rendered until input is touched in my case.

I've created a demo that briefly mirrors my original situation.

angular-cli error

i get the following error when i do a angular-cli production build after upgrading from version 0.1.3 to 0.2.1:

Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error on dependency parsing for vendor/ng2-tag-input/dist/ng2-tag-input.bundle.js at file:///<PATH>/tmp/bundle_plugin-input_base_path-eXqLvrqq.tmp/0/vendor/ng2-tag-input/dist/ng2-tag-input.bundle.js
        Loading vendor/ng2-tag-input/index.js
        <LOADING MULTIPLE CUSTOM FILES>
        Loading app/index.js
        Loading main.js
        Error: Multiple anonymous defines.
    at ParseTreeTransformer.AMDDependenciesTransformer.transformCallExpression (<PATH>/node_modules/angular-cli/node_modules/systemjs-builder/compilers/amd.js:98:13)
    at CallExpression.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:6948:28)
    at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
    at ParseTreeTransformer.transformExpressionStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9825:31)
    at ExpressionStatement.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:7419:28)
    at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
    at ParseTreeTransformer.transformToBlockOrStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9538:32)
    at ParseTreeTransformer.transformIfStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9955:29)
    at IfStatement.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:7737:28)
    at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
    at ParseTreeTransformer.transformToBlockOrStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9538:32)
    at ParseTreeTransformer.transformIfStatement (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9956:31)
    at IfStatement.$__super.transform (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:7737:28)
    at ParseTreeTransformer.transformAny (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9514:44)
    at ParseTreeTransformer.transformList (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9521:34)
    at ParseTreeTransformer.transformFunctionBody (<PATH>/node_modules/angular-cli/node_modules/traceur/bin/traceur.js:9895:31)

The broccoli plugin was instantiated at: 
    at BundlePlugin.Plugin (<PATH>/node_modules/angular-cli/node_modules/broccoli-plugin/index.js:10:31)
    at BundlePlugin.CachingWriter [as constructor] (<PATH>/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at BundlePlugin (<PATH>/node_modules/angular-cli/lib/broccoli/angular-broccoli-bundle.js:11:5)
    at Angular2App._getBundleTree (<PATH>/node_modules/angular-cli/lib/broccoli/angular2-app.js:437:22)
    at Angular2App._buildTree (<PATH>/node_modules/angular-cli/lib/broccoli/angular2-app.js:160:21)
    at new Angular2App (<PATH>/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (<PATH>/angular-cli-build.js:13:13)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (<PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (<PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (<PATH>/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (<PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/build.js:15:19)
    at <PATH>/node_modules/angular-cli/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (<PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (<PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at <PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (<PATH>/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9)

I dont know if its your problem or not, but if you can somehow fix it I would be pleased.
I'm using angular-cli beta.10

If you need more info just let me know.

Thanks

Rendering thousands of items crashes browser

I am trying to load 50,000 items via the Model in a for loop to the TAG Input. However this is crashing the browser.

Is there a way how to add bulk items without doing re-bind, re-drawing etc..

I was thinking something like

1. Unbind the model from the TAG
2. Edit the model information (add 50k rows)
3. Re-bind the model to the TAG .. will redraw just once like this.

Please Help

Custom template seems to be broken

Probably related to latest integrations.

Duplicate handling

Hy,

would it be possible to handle duplicates same as in the original ng-chips?
In the original the input filed gets cleared if a duplicate input is entered.

Further more I once found such a input that also made the corresponding duplicate blink once in a different color, to show that such a tag has already been entered. Such a feature would also be great I think.

Error when attempting to use the autocomplete function

I've run into an issue with the control on my form when attempting to use the autocomplete function. The error below is thrown whenever a key has been pressed in the control.

I set a break point on the first line of the handleKeypress method in ng2-dropdown-menu.ts (line 106). When that break point is hit, this is undefined, so this.state is undefined.

EXCEPTION: TypeError: Cannot read property 'state' of undefined platform-browser.umd.js:937 EXCEPTION: TypeError: Cannot read property 'state' of undefinedBrowserDomAdapter.logError @ platform-browser.umd.js:937BrowserDomAdapter.logGroup @ platform-browser.umd.js:947ExceptionHandler.call @ core.umd.js:4389next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 platform-browser.umd.js:937 STACKTRACE:BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4391next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 platform-browser.umd.js:937 TypeError: Cannot read property 'state' of undefined at Ng2DropdownMenu.handleKeypress (ng2-dropdown-menu.ts:106) at eval (platform-browser.umd.js:1836) at eval (platform-browser.umd.js:1913) at ZoneDelegate.invoke (zone.js:323) at Object.onInvoke (core.umd.js:9245) at ZoneDelegate.invoke (zone.js:322) at Zone.runGuarded (zone.js:230) at NgZoneImpl.runInnerGuarded (core.umd.js:9278) at NgZone.runGuarded (core.umd.js:9510) at HTMLBodyElement.outsideHandler (platform-browser.umd.js:1913)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4392next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:327Zone.runGuarded @ zone.js:233NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423 zone.js:260 Uncaught TypeError: Cannot read property 'state' of undefinedNg2DropdownMenu.handleKeypress @ ng2-dropdown-menu.ts:106(anonymous function) @ platform-browser.umd.js:1836(anonymous function) @ platform-browser.umd.js:1913ZoneDelegate.invoke @ zone.js:323onInvoke @ core.umd.js:9245ZoneDelegate.invoke @ zone.js:322Zone.runGuarded @ zone.js:230NgZoneImpl.runInnerGuarded @ core.umd.js:9278NgZone.runGuarded @ core.umd.js:9510outsideHandler @ platform-browser.umd.js:1913ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423

Error with angular-cli and AoT

I get the following error when i try to build/serve my project using angular-cli beta 16 and ng2-tag-input module version 0.3.4 with the --aot option:

Error encountered resolving symbol values statically. Calling function 'require', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol TagInputModule in <PROJECT_PATH>/node_modules/ng2-tag-input/index.ts, resolving symbol <MODULE_NAME> in <MODULE_TS_FILE_PATH>, resolving symbol <MODULE_NAME> in <MODULE_TS_FILE_PATH>

Broken minification with UglifyJS

Hi, @Gbuomprisco !

With the new RC.6 the minification for production enviroments is broken.
If i try to run UglifyJS on my sources with webpack, it gives me:
ERROR in app.js from UglifyJs SyntaxError: Unexpected token punc «,», expected punc «:» [./~/ng2-tag-input/dist/ng2-tag-input.bundle.js:543,0]

I think it is due to the fact that the bundles are not compiled in commonjs.

How to add tag-input in to angular cli?

I am new in angular 2 and i used angular cli. Can you advise how to build tag-input.
Thanks.

[Bug] [Seems-fixed] One-way bound '[ngModel]' changes when adding a new tag

Hello, I think I found a bug.

Imagine that you have tag-input in your form with one-way bound [ngModel]=myarray.

Case 1:
Load the page and add a new tag, this tag adds to this one-way bound model. That's not correct behavior. The correct behavior is that tag should only add to form's.value.name, but ngModel should stay unchanged.

Case 2:
Load the page and delete some tag, the ng-model stays unchanged (that's correct) and that tag is removed in the form's array only (that's correct too).

After one tag is removed, you can add a new tag and that new tag won't add to the ngModel (that's correct) and only adds to the form's model (that's correct too).

So I think there could be a little bug in your code, with ngModel binding to a tag's input text input. It's fixed when you delete some tag and then add new, so I think somewhere in that delete function is declared something that's missing initially.

You can see the problem here.

Thank you so much for your help!

How to use onSelect

I did it: (onSelect)="onSelect(tag)" and (onSelect)="onSelect()", Although onSelect is being called, the item/tag always comes undefined.

Error: TypeError: core_1.NgModule is not a function(…)

Hi Guys,

I have an issue related to ngs-tag-input. Lately, I have made an update to the latest one.

The following is the package.json:

{
  "_args": [
    [
      "[email protected]",
      "C:\\Repository\\Clients\\Current\\Inspectorate\\inspectorate\\www\\Inspectorate\\angular2-seed-master"
    ]
  ],
  "_from": "[email protected]",
  "_id": "[email protected]",
  "_inCache": true,
  "_installable": true,
  "_location": "/ng2-tag-input",
  "_nodeVersion": "6.3.1",
  "_npmOperationalInternal": {
    "host": "packages-16-east.internal.npmjs.com",
    "tmp": "tmp/ng2-tag-input-0.2.9.tgz_1473270699594_0.5384787213988602"
  },
  "_npmUser": {
    "email": "[email protected]",
    "name": "giancarlo_psk"
  },
  "_npmVersion": "3.10.3",
  "_phantomChildren": {},
  "_requested": {
    "name": "ng2-tag-input",
    "raw": "[email protected]",
    "rawSpec": "0.2.9",
    "scope": null,
    "spec": "0.2.9",
    "type": "version"
  },
  "_requiredBy": [
    "/"
  ],
  "_resolved": "https://registry.npmjs.org/ng2-tag-input/-/ng2-tag-input-0.2.9.tgz",
  "_shasum": "9534ffb7fc1de12e8164c225552315880c8d98c2",
  "_shrinkwrap": null,
  "_spec": "[email protected]",
  "_where": "C:\\Repository\\Clients\\Current\\Inspectorate\\inspectorate\\www\\Inspectorate\\angular2-seed-master",
  "author": {
    "email": "[email protected]",
    "name": "Giancarlo Buomprisco"
  },
  "bugs": {
    "url": "https://github.com/Gbuomprisco/ng2-tag-input/issues"
  },
  "contributors": [],
  "dependencies": {
    "ng2-material-dropdown": "^0.3.1"
  },
  "description": "Tag Input component for Angular 2",
  "devDependencies": {
    "@angular/common": "^2.0.0-rc.6",
    "@angular/compiler": "^2.0.0-rc.6",
    "@angular/core": "^2.0.0-rc.6",
    "@angular/forms": "^2.0.0-rc.6",
    "@angular/http": "^2.0.0-rc.6",
    "@angular/platform-browser": "^2.0.0-rc.6",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.6",
    "@angular/platform-server": "^2.0.0-rc.6",
    "@angular/router": "^2.0.0-rc.2",
    "autoprefixer": "^6.3.7",
    "awesome-typescript-loader": "~0.16.2",
    "core-js": "^2.4.1",
    "css-loader": "^0.23.1",
    "es6-promise": "3.0.2",
    "es6-shim": "0.35.0",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "jasmine": "^2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-coverage": "^1.1.0",
    "karma-jasmine": "^0.3.8",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "1.7.0",
    "node-sass": "^3.8.0",
    "postcss-loader": "^0.9.1",
    "precss": "^1.4.0",
    "protractor": "^3.3.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.11",
    "sass-loader": "^3.2.3",
    "source-map-loader": "^0.1.5",
    "style-loader": "^0.13.1",
    "ts-helpers": "1.1.1",
    "ts-node": "^0.7.3",
    "tslint": "^3.13.0",
    "typescript": "~1.8.9",
    "typings": "~1.0.3",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.0",
    "webpack-merge": "^0.8.4",
    "zone.js": "0.6.17"
  },
  "directories": {},
  "dist": {
    "shasum": "9534ffb7fc1de12e8164c225552315880c8d98c2",
    "tarball": "https://registry.npmjs.org/ng2-tag-input/-/ng2-tag-input-0.2.9.tgz"
  },
  "files": [
    "dist",
    "index.ts"
  ],
  "gitHead": "536de8e8000b8af43f5296b57704c82aa8fc3ad9",
  "homepage": "https://github.com/Gbuomprisco/ng2-tag-input",
  "keywords": [
    "angular 2",
    "angular 2 tag input",
    "tag input component"
  ],
  "license": "MIT",
  "main": "./dist/index.js",
  "maintainers": [
    {
      "name": "giancarlo_psk",
      "email": "[email protected]"
    }
  ],
  "name": "ng2-tag-input",
  "optionalDependencies": {},
  "readme": "ERROR: No README data found!",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Gbuomprisco/ng2-tag-input.git"
  },
  "scripts": {
    "build": "webpack --inline --colors --progress --display-error-details --display-cached",
    "postinstall": "npm run typings-install",
    "prepublish": "npm run build && ./node_modules/.bin/tsc",
    "server": "webpack-dev-server --config webpack.demo.js --inline --colors --progress --display-error-details --display-cached --port 3000  --content-base demo",
    "start": "npm run server",
    "test": "karma start karma.conf.js",
    "typings-install": "typings install",
    "watch": "npm run build -- --watch"
  },
  "version": "0.2.9"
}

Now, I am experiencing an issue where it is telling me the following error when executing the script where System.import('app/main')
localhost/:136 Error: TypeError: core_1.NgModule is not a function(…) "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ localhost/:136

I cannot run the application no more because of this error.

Can anyone help me sort this out, please?

Thank you.

Flex-wrap issue

Hy,

I have the issue that adding many tags makes them overflow to the right of the screen. This is because for some reason flex is not wrapping in my example (https://github.com/FallenRiteMonk/tagInputExample) as it is in your live demo. I figured out that adding flex-wrap: wrap; or flex-wrap: inherit; to the flex class definition in style.scss fixes the problem for me.
Would it be possible that this could be implemented or do I have to work around it somehow using the custom template?

invalid message

Is it somehow possible to display a error message if the entered tag is not valid?

Like for example in the demo with the custom validator show a message that a tag must start with a @ if the users enters a tag that doesn't.

Or can I access the form validation status somehow to show/hide a message accordingly?

Thanks

Provide own getMatchingItems

Hey,

I was looking at ng2-tag-input as a replacement for ng2-select.
Your library seems like the perfect match for us. The only option I'm missing right now is to specify my own getMatchingItems function.
In our use case, we need not only provide beginning of word matching, but also return items that match in the middle of the word (so not really an autocomplete functionality, but more a simple search functionality). Also, we'd like to show the whole list of options, when the input is empty and the user clicks into it.

Hope that makes sense,
Wolfgang

focus loss addition

Hy,

would it be possible to add the current input to the tags if the input looses focus?
Example:
If I go to the life demo, select the first tag input and start typing, then (without clicking enter) use the mouse to jump to the second tag input, the tag I entered into the first is not added to the tag list.

I don't know if this is intended, but I think this should be changed, because then one could tab to the next form field without having to hit enter.

Thanks and Greetings

I have received this below error while using your module in app.module.ts

SystemJS) Error: XHR error (404 Not Found) loading http://localhost:3001/node_modules/ng2-tag-input/dist/dist/modules/ng2-tag-input.module.js(…)

Error during initialization Angular2.RC4

i adding the tag-input into my application. On init i getting an error:

Can't bind to '@fade' since it isn't a known native property.
Im running on Angular2 RC4.
My HTML is simple (copied from example page)

<tag-input [ngModel]="['@item']"
      [onlyFromAutocomplete]="true"
      [autocompleteItems]="['item1', 'item2']"
      [autocomplete]="true">
 </tag-input>

My Component:

@Component({
    selector: 'test-tag',
    templateUrl: 'tags.html', 
    directives: [TagInput],
    providers: [NG_FORM_PROVIDER]
})

Error:

Can't bind to '@fade' since it isn't a known native property ("

    <!-- MENU -->
    <div class='ng2-dropdown-menu' [ERROR ->][@fade]="state.toString()">
        <ng-content></ng-content>
    </div>
"): Ng2DropdownMenu@6:35 

Migrate to Typescript 2 beta and @types

Add possibility to select tags using an autocomplete dropdown

Does not work with Angular-CLI Final

Thank you for an excellent project.

Unfortunately, it looks like it isn't working with Angular-CLI final. I have created a repo here where you can see the issue https://github.com/jculverwell/NgTagsInputWithAngularCLIFinal

Looks like a problem with Zone.js. Not sure if you adjust your project to avoid this issue or if it is a zone.js issue. I will raise with the zone.js repo as well.

zone.js:129 Uncaught TypeError: Cannot read property 'name' of undefined
exports.functionName    @   function-name.ts?6954:7
(anonymous function)    @   transformer.ts?d0de:89
dependencies    @   transformer.ts?d0de:89
(anonymous function)    @   transformer.ts?d0de:145
load    @   transformer.ts?d0de:53
exports.transform   @   transformer.ts?d0de:61
(anonymous function)    @   transformer.ts?d0de:161
transformChildren   @   transformer.ts?d0de:159
(anonymous function)    @   transformer.ts?d0de:180
load    @   transformer.ts?d0de:53
exports.transform   @   transformer.ts?d0de:61
(anonymous function)    @   transformer.ts?d0de:161
transformChildren   @   transformer.ts?d0de:159
(anonymous function)    @   transformer.ts?d0de:180
load    @   transformer.ts?d0de:53
exports.transform   @   transformer.ts?d0de:61
(anonymous function)    @   transformer.ts?d0de:161
transformChildren   @   transformer.ts?d0de:159
(anonymous function)    @   transformer.ts?d0de:180
load    @   transformer.ts?d0de:53
exports.transform   @   transformer.ts?d0de:61
exports.transformToTree @   mutable-tree-factory.ts?f7a1:12
(anonymous function)    @   mutable-tree-factory.ts?f7a1:40
exports.createTreeFromElements  @   mutable-tree-factory.ts?f7a1:40
updateTree  @   backend.ts:65
update  @   backend.ts:90
(anonymous function)    @   backend.ts:101
SafeSubscriber.__tryOrUnsub @   Subscriber.js?215e:223
SafeSubscriber.next @   Subscriber.js?215e:172
Subscriber._next    @   Subscriber.js?215e:125
Subscriber.next @   Subscriber.js?215e:89
DebounceTimeSubscriber.debouncedNext    @   debounceTime.js?500c:98
dispatchNext    @   debounceTime.js?500c:114
AsyncAction._execute    @   AsyncAction.js?e414:111
AsyncAction.execute @   AsyncAction.js?e414:86
AsyncScheduler.flush    @   AsyncScheduler.js?ae69:36
ZoneDelegate.invokeTask @   zone.js:225
Zone.runTask    @   zone.js:125
ZoneTask.invoke @   zone.js:293

console output error

Hy,

I get the following error thrown to my console, but as far as I have quickly tested, everything seems to work!

node_modules/ng2-tag-input/index.ts:3:0 Cannot find name 'exports'.

Validation required on ng2-tag-input

Hi guys,

How can I set a required validation on the ng2-tag input field please? I mean that when user tries to submit the form and nothing has been selected, form will not be submitted.

Thank you for your help.

Kind Regards

UNMET PEER DEPENDENCY

Hy,

you have a UNMET PEER DEPENDENCY error in your current version.
Angular forms 0.1.1 requires angular2 version rc.3, but you have rc.4 as dependency.
Upgrading to forms 0.2.0 fixes the dependency issue, but breaks your test, even though everything seems to be working fine.
Downgrading to rc.3 fixes the issue also, without breaking the tests.

material_chip

Have you support material_chip?

When I use material_chip and add [(ngModel)] I got next error:
No value accessor for form control with unspecified name attribute

I used it by:
<div materialize="material_chip" [(ngModel)]="tags"></div>

Getting error: TS2304: Build:Cannot find name 'require'.Cannot find name 'exports'.

The project won't compile:

1>C:\Project\node_modules\ng2-tag-input\index.ts(1,18): error TS2304: Build:Cannot find name 'require'.
2>C:\Projects\node_modules\ng2-tag-input\index.ts(3,1): error TS2304: Build:Cannot find name 'exports'.

I am using RC5. See my package.json

{
"version": "1.0.0",
"name": "project",
"private": true,
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.5",
"core-js": "^2.4.0",
"ng2-tag-input": "^0.2.3",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"gulp-clean": "^0.3.2",
"gulp-concat": "2.6.0",
"gulp-cssmin": "0.1.7",
"gulp-notify-growl": "^1.0.2",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-tsc": "^1.2.0",
"gulp-typescript": "^2.13.6",
"gulp-uglify": "2.0.0",
"gulp-watch": "^4.3.9",
"path": "^0.12.7",
"rimraf": "2.5.3",
"typescript": "^1.8.10",
"typings": "^1.3.1"
}
}