角2 - ラベルの代わりにチップを使う

Question

私は2番目のウェブサイトを開発しています。ここでは、 "プログラミング"のようにウェブサイトにスキルを追加することができます。今、私は新しいスキルを追加するときにラベルを生成しており、スキルを削除するボタンがあります。

HTML：：

<div *ngFor="let skill of skillArray; let i = index"> 
    <label id = "skills"for="skill">{{skill}}</label> 
    <button type="button" (click)="removeSkill(i)">X</button> 
</div> 

<div id="addSkill"> 
    <input #newSkill type="text" placeholder="Add your skills here"> 
    <button (click)="addToSkill(newSkill.value)" class="btn-addskill">Add Skill</button> 
</div> 

TS：

export class ProfileComponent { 
url: any = ""; 
editMode = false; 
skillArray: string[] = []; 

addToSkill(skillInput:string) {  
    if (!this.skillArray.find(x => x == skillInput)) { 
    this.skillArray.push(skillInput); 
    } 
} 

removeSkill(i: any) { 
    this.skillArray.splice(i, 1); 
} 

チップを何私が欲しいのは（画像を参照）

私が今持っているどのようなチップを使用することです：

私はhttps://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_contact_chips_closeに従うことによってチップを作る方法を知っているが、私はラベルここ

Answer 1

の代わりにチップを生成する難しさを持っては簡単ですフォーム構築するのに役立ちますChips Example

ビュー

<div class="control"> 
    <label class="control-label">Skills</label> 
    <ul class="chips-list" (click)="token.focus()" [ngClass]="{ focus: focus }"> 
    <li *ngFor="let skill of skillArray; let i = index" class="chip"> 
     <i class="chip__icon"></i> 
     {{ skill }} 
     <span class="chip__close" (click)="removeSkill(i)">&times;</span> 
    </li> 
    <li class="chip--input"> 
     <input #token type="text" class="chip-input-control" placeholder="Add your skills here" 
     (keydown.enter)="!!onKeydown(token)" 
     (focus)="focus = true" 
     (blur)="focus = false"> 
    </li> 
    </ul> 
</div> 

成分

skillArray: string[] = []; 

focus: boolean = false; 

onKeydown(tokenInput: HTMLInputElement): void { 
    let value = tokenInput.value; 
    if (value && value.trim().length && !this.skillArray.find(x => x == value)) { 
    this.skillArray.push(value); 
    } 
    tokenInput.value = ''; 
} 

removeSkill(i: any) { 
    this.skillArray.splice(i, 1); 
}