I want to store my inputed strings in chips. I managed to just push labels but then I have the problem, that every new value gets overridden by the new one and when I try to do it with chips, just empty chips are created. Even tough I believe the first problem isn’t yet.
page.html
<ion-chip outline (click)="remove(chip)" color="favorite" class="chip" *ngFor="let tag of tagName">
<ion-label>{{tag.myVal1}}</ion-label>
<ion-icon name="close-circle"></ion-icon>
</ion-chip>
<ion-item lines="none">
<ion-input type="text" text-right maxLength="10" placeholder="Tags" [(ngModel)]="myVal"></ion-input>
<ion-button class="adder" color="danger" (click)="add(chip)">
<ion-icon name="add"></ion-icon>
</ion-button>
</ion-item>
page.ts
export class Tag {
tag: string;
constructor(values: Object = {}) {
Object.assign(this, values);
}
}
tagName: Tag[] = [];
myVal: string = "";
myVal1: string = "";
constructor() {}
add(): void {
let id = this.tagName.length + 1;
this.tagName.push(new Tag({ tag: "myVal1" + id, color: this.color[this.getRandomInt(this.color.length)] }, ));
}
remove(tag: Tag) {
let id = this.tagName.indexOf(tag);
this.tagName.splice(id, 1);
}
getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
refresh()
{
this.myVal1 = this.myVal;
}