How can I pass an enum value as a variable to a function in the Angular html file?-CodePudding

I have this enum I would like to use in my html file:

export enum CartAction {
  ADD = 'ADD',
  REMOVE = 'REMOVE',
}

Currently, it is used in the component ts file as

 async cartAction(action: CartAction): Promise<void> {
    if (action === CartAction.ADD) {
    }
    if (action === CartAction.REMOVE) {
    }
  }

And I'd like to be able to use the enum in the html file like so:

<button (click)="cartAction(someCondition? CartAction.ADD : CartAction.REMOVE )">text</button>

I get the following error:

Property 'CartAction' does not exist on type 'MyPage'. 
Did you mean 'someOtherAction'?ngtsc(2551)

How can I solve this?

CodePudding user response：

You have to expose it as component property

class YourComponent{
      CardAction=CardAction
}

and now it will work, however I think it is a bad practice and the less stuff you have in the template code then better. I would keep that logic you already have in the component code.

CodePudding user response：

To use anything in your template files it needs to be public (protected as of Angular 15) to be accesable, which imports are not.

What I used to do is unwrap the enum in my component:

protected cartActions = CartActions;

with that you should be able to use it as follows:

<button (click)="cartAction(someCondition? cartAction.ADD : cartAction.REMOVE )">text</button>