Research
Security News
Threat Actor Exposes Playbook for Exploiting npm to Build Blockchain-Powered Botnets
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
ng2-tag-input
Advanced tools
This is a component for Angular 2. Design and API are blandly inspired by Angular Material's md-chips.
Check out the live demo (with source code) here http://www.webpackbin.com/Vy7PtkdYW.
npm install ng2-tag-input --save
npm test
The component is updated to use the latest version of Angular 2 (RC 5). This means it requires some configuration to correctly work with your app. Ensure, you are registering the following providers when bootstrapping the app:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { FormsModule } from '@angular/forms';
import { App } from './home/home';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [BrowserModule, FormsModule],
bootstrap: [App],
declarations: [App]
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);
Please do have a look at the file demo/app.ts
if you are unsure how to configure the app.
Ensure you import the module:
import { TagInputModule } from 'ng2-tag-input';
// please notice this is the new way of telling a Component
// to import another component...no more directives[]
@NgModule({
imports: [TagInputModule]
})
export class MyModule {}
Once the module is imported, import the TagInput component and use it in your container component:
import { TagInput } from 'ng2-tag-input';
import { Component } from '@angular2/core';
@Component({
selector: 'app',
template: `<tag-input [(ngModel)]='items'></tag-input>`
});
export class App {
items = ['Pizza', 'Pasta', 'Parmesan'];
// ...
}
@Input
ngModel
- [string[]
] - Model of the component. Accepts an array of strings as input.placeholder
- [?string
] - String that sets the placeholder of the input for entering new terms.secondaryPlaceholder
- [?string
] - String that sets the placeholder of the input for entering new terms when there are 0 items entered.maxItems
- [?number
] - Sets the maximum number of items it is possible to enter.readonly
- [?boolean
] - Sets the tag input static, not allowing deletion/addition of the items entered.separatorKeys
- [?number[]
] - Array of keyboard keys with which is possible to define the key for separating terms. By default, only Enter is the defined key.transform
- [?(item: string) => string
] - a function that takes as argument the value of an item, and returns a string with the new value when appended. If the method returns null/undefined/false, the item gets rejected.validators
- [?Validators[]
] - an array of Validators (custom or Angular's) that will validate the tag before adding it to the list of items. It is possible to use multiple validators.autocomplete
- [?boolean
] - if true, it adds an autocomplete component from which is possible to select itemsautocompleteItems
- [?string[]
] - an array of items to populate the autocomplete dropdownonlyFromAutocomplete
- [?boolean
] - if true, it will be possible to add new items only from the autocomplete dropdown@Output
onAdd
- [?onAdd(item: string)
] - event fired when an item has been addedonRemove
- [?onRemove(item: string)
] - event fired when an item has been removedonSelect
- [?onSelect(item: string)
] - event fired when an item has been selectedonFocus
- [?onFocus(item: string)
] - event fired when the input is focused - will return current input valueonBlur
- [?onBlur(item: string)
] - event fired when the input is blurred - will return current input valueBasic examples:
// example app
@Component({
selector: 'app',
template: `<tag-input [(ngModel)]='items'></tag-input>`
});
export class App {
items = ['Pizza', 'Pasta', 'Parmesan'];
options = {
placeholder: "+ term",
secondaryPlaceholder: "Enter a new term",
separatorKeys: [4, 5]
maxItems: 10
}
onItemAdded(item) {
console.log(``${item} has been added`)
}
onItemRemoved(item) {
console.log(``${item} has been removed :(`)
}
// ...
}
// PROPERTIES
<tag-input [(ngModel)]='items'
[placeholder]="options.placeholder"
[secondaryPlaceholder]="options.secondaryPlaceholder"
[maxItems]="options.maxItems"
[separatorKeys]="options.separatorKeys">
</tag-input>
// EVENTS
<tag-input [(ngModel)]='items'
(onRemove)="onItemRemoved($event)"
(onAdd)="onItemAdded($event)">
</tag-input>
// CUSTOM TEMPLATES
// Input tag with a custom template
<tag-input [(ngModel)]='items' #input> // create a reference #input to the controller in order to use its API
<div class='tag' *ngFor='let item of input.value'> // loop over the items
<div class='tag__name'> {{ item }} </span> // display its values
<span (click)="input.remove(item)">
Remove me
</span>
</div>
</tag-input>
If you want to see more advanced examples, please have a look at http://www.webpackbin.com/Vy7PtkdYW.
FAQs
Tag Input component for Angular
The npm package ng2-tag-input receives a total of 100 weekly downloads. As such, ng2-tag-input popularity was classified as not popular.
We found that ng2-tag-input demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.