Изменить текст кнопки в html и angular 2

Question

Я хочу изменить текст кнопки после ее выбора, по логике она работает нормально, изначально кнопка YES подсвечивается, как только я нажимаю на нее, слегка меняются, затем, если я при наведении курсора на значок отключения, будет отображаться первое изображение: до нажатия второго изображения: после нажмите Так, что я хочу, когда я нажимаю на да, это должно изменить его на НЕТ, и если я при наведении курсора на значок отключения должен показать, вот мой HTML код

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

</div>

Answer 1

in yourComponent.html

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

</div>

В .ts

Создайте новую логическую переменную isClickedOnYes и инициализируйте ее как false.

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

Когда вы нажимаете на кнопку, она становится истинной, а заголовок становится НЕТ, когда вы нажимаете другой раз, он становится ложным, а заголовок становится ДА;

В sayYes () функцию, которую вы можете реализовать в logi c следующим образом:

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

 }

Answer 2

самый короткий способ - условно отобразить текст внутри кнопки с помощью innerText

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

Answer 3

Есть много способов изменить текст. Я бы сделал интерполяцию с условиями вашего «отключенного» свойства, например:

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

И чтобы отключить кнопку при наведении, вы можете добавить css свойство 'pointer-events' со значением 'none'. Это сделает вашу кнопку не кликабельной, а затем вы создадите ее самостоятельно.

button:hover{
    pointer-events: none;
}