Enums in Angular applications - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular handle enum values in templates?

Given this enum and component code, what will be displayed in the template?

export enum Status {
  Active = 'ACTIVE',
  Inactive = 'INACTIVE'
}

@Component({
  selector: 'app-status',
  template: `<p>Status: {{ status }}</p>`
})
export class StatusComponent {
  status = Status.Active;
}

Angular

export enum Status {
  Active = 'ACTIVE',
  Inactive = 'INACTIVE'
}

@Component({
  selector: 'app-status',
  template: `<p>Status: {{ status }}</p>`
})
export class StatusComponent {
  status = Status.Active;
}

A Status: ACTIVE

B Status: 0

C Status: Active

D Status: undefined

💡 Hint

Remember enums with string values show the string, not the key name.

In Angular templates, when you bind an enum value that is a string, it displays the string value. Here, Status.Active is 'ACTIVE', so the template shows 'Status: ACTIVE'.

📝 Syntax

intermediate

Which enum declaration is valid in Angular TypeScript?

Choose the correct enum declaration syntax that will compile without errors in Angular.

A enum Colors = { Red: 'RED', Green: 'GREEN', Blue: 'BLUE' }

B enum Colors { Red: 'RED', Green: 'GREEN', Blue: 'BLUE' }

C enum Colors { Red = 'RED', Green = 'GREEN', Blue = 'BLUE' }

D enum Colors { 'Red' = 'RED', 'Green' = 'GREEN', 'Blue' = 'BLUE' }

💡 Hint

Look for the correct enum key-value syntax in TypeScript.

Option C uses the correct enum syntax with keys and string values separated by = and commas. Options B, C, and D have syntax errors.

🔧 Debug

advanced

Why does this Angular component throw an error when using an enum in the template?

Consider this code snippet:

export enum Mode {
  Light,
  Dark
}

@Component({
  selector: 'app-theme',
  template: `<p>Current mode: {{ Mode.Dark }}</p>`
})
export class ThemeComponent {
}

What is the cause of the error when rendering the template?

Angular

export enum Mode {
  Light,
  Dark
}

@Component({
  selector: 'app-theme',
  template: `<p>Current mode: {{ Mode.Dark }}</p>`
})
export class ThemeComponent {
}

A The enum Mode is shadowed by the class property, causing a runtime error.

B The template syntax {{ Mode.Dark }} is invalid and should be {{ Mode['Dark'] }}.

C The enum values are numbers, so Angular cannot display them directly in templates.

D The enum Mode is not accessible in the template because it is not assigned to a class property.

💡 Hint

Think about how templates access class properties and variables.

Angular templates can only access properties of the component class instance. Without assigning the enum to a class property, the template cannot see it, causing an error.

❓ state_output

advanced

What is the value of 'currentStatus' after this Angular component runs?

Given this enum and component code:

export enum Status {
  Pending = 1,
  Approved,
  Rejected
}

@Component({
  selector: 'app-request',
  template: `<p>Status: {{ currentStatus }}</p>`
})
export class RequestComponent {
  currentStatus = Status.Approved;
}

What is the value of 'currentStatus'?

Angular

export enum Status {
  Pending = 1,
  Approved,
  Rejected
}

@Component({
  selector: 'app-request',
  template: `<p>Status: {{ currentStatus }}</p>`
})
export class RequestComponent {
  currentStatus = Status.Approved;
}

A Approved

B 2

C 1

D undefined

💡 Hint

Numeric enums auto-increment from the first value.

Status.Pending is 1, so Status.Approved is 2, and Status.Rejected is 3. The value of currentStatus is 2.

🧠 Conceptual

expert

Why should enums be assigned to component properties for template use in Angular?

In Angular, why is it necessary to assign an enum to a component property before using it in the template?

A Because Angular templates can only access instance properties, not imported symbols directly.

B Because enums are not supported in Angular templates unless converted to strings first.

C Because assigning enums to properties improves runtime performance by caching values.

D Because Angular requires all variables in templates to be declared with @Input decorators.

💡 Hint

Think about the scope of variables accessible in Angular templates.

Angular templates only have access to the component's instance properties and methods. Imported enums are not visible unless assigned to a property.