I am looking to toggle between the active and inactive classes on a button element. For example, in this demo, there are 5 buttons and when I click on the first button it removes the last one. How can I remove the clicked button? And how do I implement the functionality to toggle between the active and inactive classes?
<ion-item>
<ion-label >Add</ion-label>
<ion-input type="text" value="" #newTag (keyup.enter)="addTag(newTag.value)" (blur)="addTag(newTag.value); newTag.value='' "></ion-input>
</ion-item>
<button (click)=addTag(newTag.value)>Add</button>
<button *ngFor="let category of categories" ion-button >{{category}} <span (click)="delete()">X</span></button>
file.ts
@Input()
newTag: any;
categories = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
addTag(newTag: string) {
if (newTag) {
this.categories.push(newTag);
}
}
delete() {
var index = this.categories.indexOf(this.newTag);
this.categories.splice(index, 1);
}