Check for multiple Interpolation values in Angular Reactive

Question

I am wondering if there is a way to check for more then true or false for an interpolated. In my case i have a form which i want to update the bttn based one the state of the form.

<button  (click)="saveEmail()"  [disabled]="emailEditForm.invalid" mat-raised-button color="primary">{{ mode }} </button>

the above is my current code and mode can be either , Save, Update, Duplicate but i would like the text to be more User friendly like. Create New Email, Update Email, Duplicate current Email. Is this posible or is this another case of having to use *ngIf ?

Mohamed Farouk · Accepted Answer · 2020-01-10 00:49:06Z

1

There are multiple ways actually..

1. Inline if:

 <button  (click)="saveEmail()"  [disabled]="emailEditForm.invalid" mat-raised-button color="primary">{{ mode=="Save"? "Create New Email":mode=="Update"? "Update Email": "Duplicate current Email" }} </button>

2 Cleaner way:

//TS

export class MyComponent {
    public Modes = { Save: "New Email", Update: "Update Email", Duplicate : "Duplicate current Email"  };
}

//HTML

<button  (click)="saveEmail()"  [disabled]="emailEditForm.invalid" mat-raised-button color="primary">{{ Modes[mode] }} </button>

Hope this helps

answered Jan 10, 2020 at 0:49

Mohamed Farouk

1,1175 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MisterniceGuy Over a year ago

The cleaner way is the way to go as it avoids endless chaining of values

Collectives™ on Stack Overflow

Check for multiple Interpolation values in Angular Reactive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related