MdTagsInput #1277
Description
Bug, feature request, or proposal:
feature request
What is the expected behavior?
When I type "Tag1," (without quotes), it creates a box with tag1 behind text cursor and clear the inner input field. Typing "Tag2, Tag3,", appends two boxes.
Each box has a close button to remove the box.
Appearance similar to the future MdTextArea style.
What is the current behavior?
Not applicable
What are the steps to reproduce?
Not applicable
What is the use-case or motivation for changing an existing behavior?
To include tagging modules.
Which versions of Angular, Material, OS, browsers are affected?
Any
Is there anything else we should know?
I started coding something.
tagsinput.component.html:
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'md-tagsinput',
styleUrls:['tagsinput.component.css'],
templateUrl: 'tagsinput.component.html'
})
export class MdTagsInputComponent{
tags:string[];
model = {currentTag:""};
constructor(){
this.tags = [];
}
onKeyPress(key:string){
if(key===',' || key===';'){
this.tags.push(this.model.currentTag);
this.model.currentTag = "";
return false;
}else if(key === 'Backspace'){
if(this.model.currentTag === ''){
this.tags.pop();
return false;
}
// TODO: remove tag if currentTag is not empty and cursor is at beginning
}
return true;
}
onClick(element){
}
closeTag(tag){
this.tags = this.tags.filter(item => item !== tag);
}
}tagsinput.component.html:
<div class="tagsinput form-control">
<ul>
<li *ngFor="let tag of tags">
{{tag}}
<button class="btn btn-tag" (click)="closeTag(tag)">
<i class="material-icons">close</i>
</button>
</li>
</ul>
<input type="text"
#currentTag="ngModel" [(ngModel)]="model.currentTag"
(keypress)="onKeyPress($event.key)">
</div>tagsinput.component.css could be similar to md-textarea styles + tag boxes styles.