Enums in Angular applications - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is an enum in Angular applications?

An enum is a special TypeScript feature used to define a set of named constants. It helps organize related values with friendly names, making code easier to read and maintain.

beginner

How do you declare a numeric enum in Angular (TypeScript)?

You declare it using the enum keyword followed by names and optional values. Example:

enum Color { Red, Green, Blue }

Here, Red=0, Green=1, Blue=2 by default.

intermediate

What is a string enum and why use it in Angular?

A string enum assigns string values to each name. It improves clarity when values are logged or sent over the network. Example:

enum Direction { Up = 'UP', Down = 'DOWN' }

intermediate

How can enums improve Angular component code?

Enums help by replacing magic numbers or strings with meaningful names. This reduces errors and makes the code easier to understand and maintain, especially for status codes or modes.

intermediate

Can you use enums in Angular templates directly?

No, Angular templates cannot access enums directly. You need to expose the enum to the component class and then bind it to the template for use.

What keyword is used to declare an enum in Angular (TypeScript)?

A interface

B class

C enum

D const

The enum keyword declares an enum in TypeScript, which Angular uses.

What is the default value of the first member in a numeric enum?

A 0

B undefined

C -1

D 1

By default, the first member of a numeric enum is assigned the value 0.

Why might you choose a string enum over a numeric enum?

A String enums are faster to execute

B String enums improve code clarity and debugging

C String enums use less memory

D String enums allow arithmetic operations

String enums make code clearer and easier to debug because values are descriptive strings.

How do you make an enum accessible in an Angular template?

A Use the enum directly in the template

B Import the enum in the template file

C Enums cannot be used in Angular templates

D Expose the enum as a property in the component class

You expose the enum in the component class, then bind it in the template.

Which of these is NOT a benefit of using enums in Angular?

A Allows dynamic runtime changes to enum values

B Improves code readability

C Reduces magic numbers or strings

D Helps prevent errors by using named constants

Enum values are fixed at compile time and cannot be changed dynamically at runtime.

Explain what enums are and how they help in Angular applications.

Think about how enums replace unclear numbers or strings with clear names.

Describe how to use enums in Angular templates and why direct use is not possible.

Consider the separation between TypeScript code and Angular template syntax.

Practice

1. What is the main purpose of using enum in an Angular application?

easy

A. To group related constant values under a single name

B. To create dynamic variables that change at runtime

C. To define functions inside components

D. To style components with CSS

Solution

1. Step 1: Understand what enums represent

   Enums are used to group related constant values, making code easier to read and maintain.

2. Step 2: Compare with other options

   Options A, B, and C describe unrelated concepts like styling, dynamic variables, or functions, which enums do not handle.

3. Final Answer:

   To group related constant values under a single name -> Option A

4. Quick Check:

   Enums = group constants [OK]

Hint: Enums group fixed values for clarity and safety [OK]

Common Mistakes:

• Thinking enums create dynamic or changeable variables
• Confusing enums with functions or styling
• Using enums for unrelated tasks like CSS

2. Which of the following is the correct syntax to declare an enum named UserRole with values Admin and User in Angular?

easy

A. UserRole enum { Admin, User }

B. enum UserRole = { Admin, User }

C. enum UserRole { Admin, User }

D. enum UserRole: { Admin, User }

Solution

1. Step 1: Recall enum declaration syntax in TypeScript

   The correct syntax is enum Name { Value1, Value2 } without equals or colons.

2. Step 2: Check each option

   enum UserRole { Admin, User } matches the correct syntax. Options B, C, and D use invalid symbols like '=', misplaced keywords, or colons.

3. Final Answer:

   enum UserRole { Admin, User } -> Option C

4. Quick Check:

   enum syntax = enum Name { ... } [OK]

Hint: Use 'enum Name { ... }' without '=' or ':' [OK]

Common Mistakes:

• Adding '=' after enum name
• Using ':' instead of braces
• Misplacing the 'enum' keyword

3. Given the enum declaration:

enum Status { Active = 1, Inactive = 0 }

What will be the output of console.log(Status.Active)?

medium

A. 1

B. Active

C. 0

D. undefined

Solution

1. Step 1: Understand enum value assignment

   Status.Active is explicitly assigned the value 1 in the enum.

2. Step 2: Check what console.log prints

   Logging Status.Active prints its numeric value, which is 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Enum value = number assigned [OK]

Hint: Enum member prints its assigned value [OK]

Common Mistakes:

• Expecting the name 'Active' to print instead of value
• Confusing 0 and 1 values
• Assuming undefined if not string

4. What is wrong with this enum declaration in Angular?

enum Color { Red = 'red', Green, Blue = 'blue' }

medium

A. Enum values cannot be strings

B. Enum names must be lowercase

C. Enum must have at least three values

D. You cannot mix string and numeric enum values without explicit assignment

Solution

1. Step 1: Analyze enum value types

   Mixing string and numeric enum members without explicit values causes errors.

2. Step 2: Identify the problem in the code

   Green has no assigned value after Red is string 'red', so it tries to auto-assign a number, which is invalid.

3. Final Answer:

   You cannot mix string and numeric enum values without explicit assignment -> Option D

4. Quick Check:

   Mixed enum types need explicit values [OK]

Hint: Assign all string values explicitly to avoid mixing errors [OK]

Common Mistakes:

• Assuming enum names must be lowercase
• Thinking enums can't have string values
• Believing enums require minimum count

5. You want to use an enum OrderStatus in Angular to represent these states: Pending, Shipped, Delivered, and Cancelled. You also want to display user-friendly text for each status in your template. Which approach is best?

hard

A. Use only strings in enum and display enum keys directly

B. Define enum with numeric values and create a mapping object for display text

C. Use separate string constants instead of enum

D. Use enum with mixed string and numeric values without mapping

Solution

1. Step 1: Understand enum usage for fixed states

   Using numeric enums keeps code efficient and clear for logic.

2. Step 2: Provide user-friendly text separately

   Mapping numeric enum values to display strings allows flexible, readable UI text.

3. Step 3: Evaluate other options

   Using only strings or constants reduces type safety or clarity; mixed enums without mapping cause errors.

4. Final Answer:

   Define enum with numeric values and create a mapping object for display text -> Option B

5. Quick Check:

   Numeric enum + mapping = best practice [OK]

Hint: Use numeric enums plus a display map for UI text [OK]

Common Mistakes:

• Using mixed enum types without mapping
• Displaying enum keys directly without user-friendly text
• Avoiding enums and using loose string constants