Cómo alternar el texto en la etiqueta <a> en angular 7

8

Tengo un botón en la etiqueta con el texto "Descongelar". Quiero alternarlo a "Congelar" al hacer clic en el botón. Aquí está el código ny:

<a class="btn btn-primary full-width" (click)="clickFreeze($event)">
                    <i class="fa fa-plus-circle"></i>Unfreeze</a>

private clickFreeze(event) {
    console.log("event.srcElement.childNodes[1].textContent", event.srcElement.childNodes[1].textContent);
    if(event.srcElement.childNodes[1].textContent =='Unfreeze'){
      event.srcElement.innerText="Freeze and Save";
    } else if(event.srcElement.innerText =='Freeze and Save'){
      event.srcElement.innerText="Unfreeze";
    }
}

Por alguna razón no funciona. event.srcElement.childNodes[1].textContentes igual a "Descongelar" cuando lo consola pero no entra en el bucle if.

Yogesh Mali
fuente
<a class="btn btn-primary full-width" (click)="clickFreeze($event)"> <i class = "fa fa-plus-circle"> </i> Descongelar </a>
Yogesh Mali
2
no juegues con el elemento DOM directamente en el modelo.
Krishna Prashatt

Respuestas:

14

No estoy seguro de por qué está utilizando este enfoque, simplemente puede alternar el texto condicionalmente de esta manera:

.html

<a class="btn btn-primary" (click)="isFreeze = !isFreeze">
  <i class="fa fa-plus-circle"></i>
  {{isFreeze ? "Unfreeze" : "Freeze and Save"}}
</a>

.ts

isFreeze: boolean = true;
Pardeep Jain
fuente
gracias por su ayuda pero (click) = "clickFreeze () está haciendo otras cosas también, así que no puedo usar (click) =" isFreeze =! isFreeze "
Yogesh Mali
@YogeshMali sí, simplemente puede llamar a la función como dijo y hacer lo mismo allí, definitivamente puede personalizar según sus requisitos.
Pardeep Jain