Change Button text in html and angular 2

Question

I want to change the button text once it is selected, logically it is working fine, initially YES button is highlighting once i click on it sightly change then if i hover disable symbol will show first image : before click second image : after click So what i want is , when i click on yes it should change it to NO and if i hover disable symbol has to show here is my HTML code

 <div>
                    <button type="button" class="confirm"
                            [disabled]="(isConfirmed && agree) || (isConfirmed && nutral)"
                            style="color: blue;"
                            (click)="sayYes()">
                        YES
                    </button>

</div>

Andrei · Accepted Answer · 2020-02-15 11:27:03Z

1

the shortest way would be to conditionally render text inside of a button with innerText

<button [innerText]="condition ? 'YES' : 'NO'"></button>

answered Feb 15, 2020 at 11:27

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FedG · Accepted Answer · 2020-02-15 11:51:15Z

in yourComponent.html

<div>
                    <button type="button" class="confirm"
                            [disabled]="(isConfirmed && agree) || (isConfirmed && nutral)"
                            style="color: blue;"
                            (click)="sayYes()">
                       {{buttonTitle}}
                    </button>

</div>

In .ts

Create a new boolean variabile isClickedOnYes and inizialize it to false.

isClickedOnYes: boolean = false;
titleButton: string = 'YES'

When you click on button it became true and title became NO, when you click another time, it became false and title became YES;

In sayYes() function you can implement a logic like this:

sayYes() {
  if(this.isClickedOnYes == false){
    this.titleButton= 'NO'
    this.isClickedOnYes = true;
  }
  else {
    this.titleButton= 'YES'
    this.isClickedOnYes = false;
 }

 }

Matheus Carvalho · Accepted Answer · 2020-02-15 11:37:01Z

0

There are many ways to change the text. I would make an interpolation with your 'disabled' property conditions, like this:

<button type="button" class="confirm"
    [disabled]="(isConfirmed && agree) || (isConfirmed && nutral)"
    style="color: blue;"
    (click)="sayYes()">
        {{ (isConfirmed && agree) || (isConfirmed && nutral) ? 'NO' : 'YES' }}
</button>

And to disable button on hover, you can add css property 'pointer-events' with value 'none'. This will make your button unclickable, and then you style it on your own.

button:hover{
    pointer-events: none;
}

answered Feb 15, 2020 at 11:37

Matheus Carvalho

5358 silver badges15 bronze badges

Collectives™ on Stack Overflow

Change Button text in html and angular 2

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related