How Can i Change Button to 2 buttons onClick

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

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

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-template #add>
            <button (click)='add()'>Add +</button>
          <ng-template #remove>
            <button (click)='remove()'>- 1 +</button>

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

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.

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