Enums in Angular applications - Mini Project: Build & Apply

Enums in Angular applications

📖 Scenario: You are building a simple Angular app to display user roles in a company. Each user has a role like Admin, Editor, or Viewer. You want to use an enum to manage these roles clearly and safely in your app.

🎯 Goal: Create an Angular standalone component that uses an enum to define user roles. Display the role names in a list on the page.

📋 What You'll Learn

Create an enum called UserRole with values Admin, Editor, and Viewer

Create a standalone Angular component called UserRolesComponent

Use the enum values in the component to create a list of roles

Display the list of roles in the component template using Angular's *ngFor

💡 Why This Matters

🌍 Real World

Enums help keep your Angular app organized by defining fixed sets of values like user roles, status codes, or categories. This makes your code easier to read and less error-prone.

💼 Career

Understanding enums and standalone components is important for Angular developers to write clean, maintainable code and build scalable applications.

1

Create the UserRole enum

Create an enum called UserRole with these exact members: Admin, Editor, and Viewer. Assign string values matching their names (e.g., Admin = 'Admin').

Angular

// Define the UserRole enum here
// Your code here

Need a hint?

Use export enum UserRole { Admin = 'Admin', Editor = 'Editor', Viewer = 'Viewer' } to define the enum.

2

Create the UserRolesComponent standalone component

Create a standalone Angular component called UserRolesComponent with a selector app-user-roles. Import CommonModule and set standalone: true in the component decorator.

Angular

export enum UserRole {
  Admin = 'Admin',
  Editor = 'Editor',
  Viewer = 'Viewer'
}

// Create UserRolesComponent here
// Your code here

Need a hint?

Use @Component with standalone: true and import CommonModule.

3

Add a list of roles using the UserRole enum

Inside UserRolesComponent, create a public property called roles that is an array containing UserRole.Admin, UserRole.Editor, and UserRole.Viewer.

Angular

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

export enum UserRole {
  Admin = 'Admin',
  Editor = 'Editor',
  Viewer = 'Viewer'
}

@Component({
  selector: 'app-user-roles',
  standalone: true,
  imports: [CommonModule],
  template: ``,
})
export class UserRolesComponent {
  // Add roles array here
  // Your code here
}

Need a hint?

Define roles as an array with the enum values.

4

Display the roles list in the component template

Update the component template to use *ngFor to loop over roles and display each role inside a <li> element within a <ul>.

Angular

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

export enum UserRole {
  Admin = 'Admin',
  Editor = 'Editor',
  Viewer = 'Viewer'
}

@Component({
  selector: 'app-user-roles',
  standalone: true,
  imports: [CommonModule],
  template: `
    
  `,
})
export class UserRolesComponent {
  roles = [UserRole.Admin, UserRole.Editor, UserRole.Viewer];
}

Need a hint?

Use <ul> with <li *ngFor="let role of roles">{{ role }}</li> inside the template.