I have a button on tag with text "Unfreeze". I want to toggle it to "Freeze" on click on the button. Here is ny code:

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

For some reason it does not work. event.srcElement.childNodes[1].textContent is equal to "Unfreeze" when I console it but it does not enter the if loop.

I have a button on tag with text "Unfreeze". I want to toggle it to "Freeze" on click on the button. Here is ny code:

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

For some reason it does not work. event.srcElement.childNodes[1].textContent is equal to "Unfreeze" when I console it but it does not enter the if loop.

• javascript
• html
• angular

• <a class="btn btn-primary full-width" (click)="clickFreeze($event)"> <i class="fa fa-plus-circle"></i> Unfreeze </a> – Yogesh Mali Commented Nov 7, 2019 at 10:09
• 2 do not fiddle with the DOM element directly in the model. – Krishna Prashatt Commented Nov 7, 2019 at 10:22
• Possible duplicate of How to change Anchor Tag text on Click in angular 2 – dasunse Commented Nov 8, 2019 at 4:37

1 Answer 1

I am not sure why you are using this approach, you can simply toggle text conditionally like this -

.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;