Enums in Angular applications - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a simple enum named Color with values Red, Green, and Blue.

Angular

export enum Color {
  Red = 0,
  Green = 1,
  [1] = 2
}

Drag options to blanks, or click blank then click option'

ABlue

BYellow

COrange

DPurple

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color name not declared in the enum.

Skipping the enum member name and only writing the number.

The enum Color includes Blue as the third value with the numeric value 2.

2fill in blank

medium

Complete the code to use the enum Color and assign the value Green to the variable selectedColor.

Angular

import { Color } from './color.enum';

const selectedColor: Color = [1];

Drag options to blanks, or click blank then click option'

AColor.Green

BColor.Blue

CColor.Red

DColor.Yellow

Attempts:

3 left

💡 Hint

Common Mistakes

Assigning a string instead of an enum member.

Using a member not declared in the enum.

The variable selectedColor is assigned the enum value Color.Green.

3fill in blank

hard

Fix the error in the enum declaration by completing the missing enum member name.

Angular

export enum Direction {
  Up = 1,
  Down = 2,
  [1] = 3,
  Left = 4
}

Drag options to blanks, or click blank then click option'

ABack

BForward

CSide

DRight

Attempts:

3 left

💡 Hint

Common Mistakes

Using a direction name not matching the enum pattern.

Leaving the member name blank or using a number only.

The enum Direction includes Right as the member with value 3.

4fill in blank

hard

Fill both blanks to create an enum Status with string values Active and Inactive.

Angular

export enum Status {
  Active = '[1]',
  Inactive = '[2]'
}

Drag options to blanks, or click blank then click option'

Aactive

Binactive

Cenabled

Ddisabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase strings instead of lowercase.

Mixing unrelated strings like 'enabled' or 'disabled'.

The enum Status uses string values 'active' and 'inactive' for its members.

5fill in blank

hard

Fill all three blanks to create a function getStatusMessage that returns a message based on the Status enum value.

Angular

import { Status } from './status.enum';

function getStatusMessage(status: Status): string {
  switch (status) {
    case Status.[1]:
      return '[2]';
    case Status.[3]:
      return 'User is inactive';
    default:
      return 'Unknown status';
  }
}

Drag options to blanks, or click blank then click option'

AActive

BUser is active

CInactive

DUser is enabled

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong enum member names in the switch cases.

Returning messages that do not match the status.

The function checks if the status is Status.Active and returns 'User is active'. For Status.Inactive, it returns 'User is inactive'.