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

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?

>Solution :

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>