Angular, how to change text in a <mat-button> when toggled

Question

How can i change the text in the mat-button when i toggle it?

<form class="example-form" style="text-align: center;" [formGroup]="loginForm" (ngSubmit)="buttonClicked()">
  <mat-card [@myAwesomeAnimation]='state' (mouseenter)="animateMe()" (mouseleave)="animateMe()" style="padding: 2vh">
      <input type="text" class="mainInput" style="font-size: 18px;" matInput autofocus shouldLabelFloat="false" placeholder="Insert Your URL Here" autocomplete="off">
  </mat-card>
  <br>
  <button mat-raised-button color="accent"></button>

</form>

Answer 1

You could have a toggle variable ?

Then use it as follow

<button (click)="doToggle()">{{toggle ? 'Toggled':'Not Toggled'}}</button>

Then in TS

toggle:boolean = false;

doToggle():void{
   this.toggle = !this.toggle;
   // Do some other stuff needed
 }

Please see fiddle

Answer 2

I don't know what toggle means, but if you're looking for text change, then

toggled: boolean = false; // Declare a boolean that holds the toggle value

<!-- Use a ternary condition -->
<button mat-raised-button (click)="toggled = !toggled" color="accent">{{toggled ? 'Toggled' : 'Not toggled'}}</button>