Enums in Angular applications

Introduction

Enums help you group related values under a single name. This makes your Angular code easier to read and less error-prone.

When you have a fixed set of related options, like user roles (Admin, User, Guest).

When you want to avoid using many string or number literals scattered in your code.

When you want to improve code clarity by giving meaningful names to constant values.

When you need to switch or compare values in a clear and safe way.

When you want to share a set of constants between components and services.

Syntax

Angular

export enum EnumName {
  Option1 = 'value1',
  Option2 = 'value2',
  Option3 = 'value3'
}

Enums are defined outside components, usually in separate files for reuse.

You can use string or numeric values for enum members.

Examples

This enum defines user roles as strings for clear role checking.

Angular

export enum UserRole {
  Admin = 'ADMIN',
  User = 'USER',
  Guest = 'GUEST'
}

This enum uses numbers to represent different statuses.

Angular

export enum Status {
  Pending = 0,
  Active = 1,
  Completed = 2
}

Numeric enums without assigned values start from 0 by default.

Angular

export enum Direction {
  Up,
  Down,
  Left,
  Right
}

Sample Program

This Angular component uses an enum to store user roles. It shows different messages based on the current role.

Angular

import { Component } from '@angular/core';

export enum UserRole {
  Admin = 'ADMIN',
  User = 'USER',
  Guest = 'GUEST'
}

@Component({
  selector: 'app-role-checker',
  template: `
    <h2>User Role Checker</h2>
    <p>Current role: {{ currentRole }}</p>
    <p *ngIf="isAdmin()">You have admin access.</p>
    <p *ngIf="!isAdmin()">You have limited access.</p>
  `
})
export class RoleCheckerComponent {
  currentRole: UserRole = UserRole.User;

  isAdmin(): boolean {
    return this.currentRole === UserRole.Admin;
  }
}

Important Notes

Always import enums where you use them to keep code organized.

Use enums to avoid typos in string values and make your code easier to maintain.

Angular templates can use enums via component properties for clear logic.

Summary

Enums group related constant values under one name.

They improve code readability and reduce errors.

Use enums in Angular to manage fixed sets like roles or statuses.