Angular global constants in html

Jose A. Matarán 0
Viewed 29

I want to use some contants that represent string literals in my application and use it in the html of the components. The point is not to define in each component lables such as yes, no, etc.

I have found this feature request on the Angular GitHub and it is the reason because I am searching for a workaround.

At this moment, I have created a constants.ts like:

// Constants.ts
export enum Lits {
  YES = 'Yes',
  NO = 'No',
}

When I need use this literals, I create a literal object:

export class TestComponent{

   lits = Lits;

   // Component...

}

And, in the html:

<my-comp [text-prop]="lits.YES">
</my-com>

My solution it's working but I'm not a expert in Angular and I have some questions:

  • Is there any best practice for this?
  • When the constants file grows, can I have performance problems?

Notes:

  • I don't want to use an internationalization framework.
  • I have read post like this but I think that this functions are boilerplate code and I'm searching for a cleaner solution.
  • I don't searching for opinions. I'm searching for contrasted performance indicators and technical references.
typescript angular
1 Answers

Use a map instead of an enum because enums are not iterables, you an just put the constants in a file and export them individually so you can import just the ones you are going to use in each component

If you need more look into a global state management solution like NgRX

useriWu80
Related