sridharan sridharan - 22 days ago 9
TypeScript Question

Active and deactivate button, Remove list angular2

I want toggle active and deactivate class in the button. For example for ref link, in this i have 5 button when i click first button removed last button , how can i remove click button? and How to implement toggle active and deactivate class?

<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);
}

Answer

Try this. I am not sure of ionic framework. I worked with angular2 but not Ionic 2

<ion-item *ngIf="!showButton">
  <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)="removeButton()">Add</button>
<button *ngFor="let category of categories; let i = index;" ion-button>{{category}} <span (click)="delete(i)">X</span></button>


@Input()
newTag: any;
showButton: boolean = true;
categories = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];

removeButton() : void {
  this.showButton = false;
}

addTag(newTag: string) {
  if (newTag) {
    this.categories.push(newTag);
  }
}

delete(index) {
  this.categories.splice(index, 1);
}

Using state for class

Define the boolean variable

stateOfButton: boolean = false;

On your HTMLbutton

<button [class.active="stateOfButton"] (click)="changeState()">Add</button>

Style it as much as you want

.active { background: red }

On your Component

changeState(): void {
    this.stateOfButton = !this.stateOfButton;
}

Hope it works with you. Cheers!