Is it possible to change the label of a button in Angular depending on a condition?

Question

I have the following button that I use throughout the different steps of a form.

<div class="col-2">
 <button class="main-buttton" (click)="increment()" label='Next' type='button' *ngIf="isShownNextButton"> 
 </button>
</div>

At the penultimate step I would like to modify the value of the label directive of the button so that it shows other text depending on a boolean I control in the ts.

Is this possible so that I don't have to implement another button and show it one or the other depending on the step I'm in?

Thank you in advance

Answer 1

You can use something like that:

HTML

<div class="col-2">
 <button class="main-buttton" (click)="increment()"  type='button'> 
   {{isShownNextButton ? 'Text if true' : 'Text if false`enter code here`'}}
 </button>
</div>

component.ts in your component you can use a field. For example:

@Component()
export class SomeComponent{
  isShownNextButton: boolean= false;
}