From b68ccf382b691ec5cb1a67761085330c2f49a4ba Mon Sep 17 00:00:00 2001 From: ivan joaquim Date: Thu, 10 Aug 2017 16:18:52 -0300 Subject: [PATCH 1/4] setting max size for tags --- lib/components/tag-input/tag-input.component.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/components/tag-input/tag-input.component.ts b/lib/components/tag-input/tag-input.component.ts index d1f23e7..b92b37a 100644 --- a/lib/components/tag-input/tag-input.component.ts +++ b/lib/components/tag-input/tag-input.component.ts @@ -37,7 +37,7 @@ export interface AutoCompleteItem { (tagRemoved)="_removeTag($event)" *ngFor="let tag of tagsList; let index = index"> -
+ = new EventEmitter(); @Output('removeTag') removeTag: EventEmitter = new EventEmitter(); @ViewChild('tagInputElement') tagInputElement: ElementRef; @@ -241,6 +242,10 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni ); } + private showForm(): boolean { + return this.tagsList.length < this.maxSize; + } + private _splitString(tagString: string): string[] { tagString = tagString.trim(); let tags = tagString.split(this.splitRegExp); @@ -273,7 +278,6 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni .filter(tag => this._isTagValid(tag)) .filter((tag, index, tagArray) => tagArray.indexOf(tag) === index) .filter(tag => (this.showAutocomplete() && this.autocompleteMustMatch) ? this._isTagAutocompleteItem(tag) : true); - this.tagsList = this.tagsList.concat(validTags); this._resetSelected(); this._resetInput(); From 62f8993afeaae7e3d4602bb5a65563ac9f6c1778 Mon Sep 17 00:00:00 2001 From: ivan joaquim Date: Thu, 10 Aug 2017 17:10:07 -0300 Subject: [PATCH 2/4] handling when no maxSize is set --- lib/components/tag-input/tag-input.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/lib/components/tag-input/tag-input.component.ts b/lib/components/tag-input/tag-input.component.ts index b92b37a..747f5c3 100644 --- a/lib/components/tag-input/tag-input.component.ts +++ b/lib/components/tag-input/tag-input.component.ts @@ -243,7 +243,12 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni } private showForm(): boolean { - return this.tagsList.length < this.maxSize; + + console.log('=== null', this.maxSize === undefined); + console.log('== null', this.maxSize == undefined); + console.log('Maxsize', this.maxSize); + + return (this.maxSize == undefined) || (this.tagsList.length < this.maxSize); } private _splitString(tagString: string): string[] { From 5ff0b2117759212d3801c477315ab75f707410ce Mon Sep 17 00:00:00 2001 From: ivan joaquim Date: Thu, 10 Aug 2017 17:12:08 -0300 Subject: [PATCH 3/4] removing console debugs --- lib/components/tag-input/tag-input.component.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/lib/components/tag-input/tag-input.component.ts b/lib/components/tag-input/tag-input.component.ts index 747f5c3..293ab0e 100644 --- a/lib/components/tag-input/tag-input.component.ts +++ b/lib/components/tag-input/tag-input.component.ts @@ -243,11 +243,6 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni } private showForm(): boolean { - - console.log('=== null', this.maxSize === undefined); - console.log('== null', this.maxSize == undefined); - console.log('Maxsize', this.maxSize); - return (this.maxSize == undefined) || (this.tagsList.length < this.maxSize); } From 694db7346ed8573cb6300925966cce37b218258e Mon Sep 17 00:00:00 2001 From: ivan joaquim Date: Mon, 21 Aug 2017 20:12:45 -0300 Subject: [PATCH 4/4] upgrading to accep angular 4 dependencies --- README.md | 11 ++++--- .../tag-input/tag-input.component.ts | 2 +- package.json | 32 +++++++++---------- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 8134e4c..cb3c791 100644 --- a/README.md +++ b/README.md @@ -1,12 +1,14 @@ -# angular2-tag-input +# angular2-tags Tag input component for Angular 2 -## Demo & Examples -[View Demo](http://www.webpackbin.com/EkDO0p3Ab) +#update +Updated to angular4 + +Added maxSize ## Quick Start ``` -npm install angular2-tag-input --save +npm install angular2-tags --save ``` ``` @@ -40,6 +42,7 @@ export class YourModule {} | `autocompleteMustMatch` | `boolean` | `true` | Whether a tag must be present in the suggestions list to be valid | | `autocompleteSelectFirstItem` | `boolean` | `true` | Pre-highlight the first item in the suggestions list | | `placeholder` | `string` | `'Add a tag'` | Placeholder for the `` tag. | +| `maxSize` | `number` | `''` | Sets a max number of tags. | ### Outputs diff --git a/lib/components/tag-input/tag-input.component.ts b/lib/components/tag-input/tag-input.component.ts index 293ab0e..c73a0a0 100644 --- a/lib/components/tag-input/tag-input.component.ts +++ b/lib/components/tag-input/tag-input.component.ts @@ -242,7 +242,7 @@ export class TagInputComponent implements ControlValueAccessor, OnDestroy, OnIni ); } - private showForm(): boolean { + public showForm(): boolean { return (this.maxSize == undefined) || (this.tagsList.length < this.maxSize); } diff --git a/package.json b/package.json index 52ebf08..ee87dcf 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "angular2-tag-input", - "version": "1.2.3", - "description": "Tag input component for Angular 2", + "name": "angular2-tags", + "version": "1.0.4", + "description": "A fork from angular2-tag-input", "main": "dist/index.js", "keywords": [ "angular2", @@ -18,22 +18,22 @@ "serve": "webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base demo/", "lint": "tslint lib/**.*.ts" }, - "author": "TEAM COOL", + "author": "Ivan Joaquim", "license": "ISC", "peerDependencies": { - "@angular/common": "2.2.4", - "@angular/core": "2.2.4", - "@angular/forms": "2.2.4" + "@angular/common": "^2.4.7 || ^4.0.0", + "@angular/core": "^2.4.7 || ^4.0.0", + "@angular/forms": "^2.4.7 || ^4.0.0" }, "devDependencies": { - "@angular/common": "2.2.4", - "@angular/compiler": "2.2.4", - "@angular/compiler-cli": "2.2.4", - "@angular/core": "2.2.4", - "@angular/forms": "2.2.4", - "@angular/platform-browser": "2.2.4", - "@angular/platform-browser-dynamic": "2.2.4", - "@angular/platform-server": "2.2.4", + "@angular/common": "^2.4.7 || ^4.0.0", + "@angular/compiler": "^2.4.7 || ^4.0.0", + "@angular/compiler-cli": "^2.4.7 || ^4.0.0", + "@angular/core": "^2.4.7 || ^4.0.0", + "@angular/forms": "^2.4.7 || ^4.0.0", + "@angular/platform-browser": "^2.4.7 || ^4.0.0", + "@angular/platform-browser-dynamic": "^2.4.7 || ^4.0.0", + "@angular/platform-server": "^2.4.7 || ^4.0.0", "@types/node": "^6.0.45", "awesome-typescript-loader": "^2.2.3", "codelyzer": "~0.0.26", @@ -46,7 +46,7 @@ "sass-loader": "^4.0.2", "source-map-loader": "^0.1.5", "tslint": "3.13.0", - "typescript": "2.0.10", + "typescript": "^2.0.10", "webpack": "^2.1.0-beta.21", "webpack-dev-server": "^2.1.0-beta.0", "zone.js": "^0.6.25"