How Can i Change Button to 2 buttons onClick

Ionic Framework ionic-v3
1

I want to create a button which by default shows ‘Add’ text on it and after click it should should ’ - 1 +’ by which the user can add or remove items via pressing on it

same as shown in below image

53
WhatsApp Image 2019-02-17 at 16.42.53.jpeg1080×484 59.2 KB

Any help would be highly appreciated
thanks in advance :slight_smile:

2

Hello,
for the button text you can use string interpolation lin html

<button (click)=‘changeme()’>{{mybuttontext}}>

in ts you initialize a variable and change it

let mybuttontext = 'Add +';

in click handler you do what ever you want

changeme() {
if (mybuttontext === 'Add +') {
this.mybuttontext = '- 1 +';
// some fancy things
}
else {
mybuttontext = 'Add +';
//  do some stuff

or you wanna use a more dynamic approach with ngIf

<ng-container *ngIf="mybuttontext == 'Add +'; then add; else remove">
          </ng-container>
          <ng-template #add>
            <button (click)='add()'>Add +</button>
          </ng-template>
          <ng-template #remove>
            <button (click)='remove()'>- 1 +</button>
          </ng-template>

in ts then
let text = ‘Add +’;
`let mybuttontext = this.text;

add() {
this.mybuttontext = ’ something different to Add +’;
// do some stuff
}

remove() {
// change text back;
this.mybuttontext = this.text;
// do some stuff
}
`

Best regards, anna-liebt

3

Umm. Thank you for the quick response but my question not just to change the text but after user clicks on add the button changes into 2 button where user can click on ‘-’ to remove and on ‘+’ to add the items and the count should be in between.

Like the food items you add or remove shown in that button.

4

Hello,
in between I change my answer to add dynamic html creation. Use this.
Put into ng-template any html content you want. In ngIf you can use any flag you want instead of a simple text.

Best regards, anna-liebt