Search code examples
htmlangularbuttondisable

Change Button text in html and angular 2

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>

enter image description here

enter image description here

Solution

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