Injectable decorator in NestJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the service class injectable.

NestJS

import { [1] } from '@nestjs/common';

@[1]()
export class MyService {
  getHello(): string {
    return 'Hello World!';
  }
}

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

AController

BInjectable

CModule

DService

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Controller or @Module instead of @Injectable.

Forgetting to import the decorator.

The @Injectable() decorator marks a class as a provider that can be injected into other classes.

2fill in blank

medium

Complete the code to inject the service into the controller constructor.

NestJS

import { Controller } from '@nestjs/common';
import { MyService } from './my.service';

@Controller()
export class MyController {
  constructor(private readonly [1]: MyService) {}

  getHello(): string {
    return this.myService.getHello();
  }
}

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

Aservice

BserviceInstance

CMyService

DmyService

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name 'MyService' as the variable name.

Using unrelated variable names.

The injected service is usually named with camelCase, matching the class name starting with lowercase.

3fill in blank

hard

Fix the error in the service decorator import statement.

NestJS

import { Injectable } from '@nestjs/[1]';

@Injectable()
export class UserService {}

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

Acommon

Bservices

Ccore

Dmodules

Attempts:

3 left

💡 Hint

Common Mistakes

Importing Injectable from '@nestjs/core' or other incorrect paths.

Misspelling the package name.

The Injectable decorator is imported from '@nestjs/common', not from other sub-packages.

4fill in blank

hard

Fill both blanks to create a provider and inject it into a module.

NestJS

import { Module, [1] } from '@nestjs/common';
import { AppService } from './app.service';

@Module({
  providers: [AppService],
  exports: [[2]],
})
export class AppModule {}

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

AInjectable

BAppService

CController

DService

Attempts:

3 left

💡 Hint

Common Mistakes

Using Controller or Service instead of Injectable in imports.

Exporting the wrong class or forgetting to export.

The Injectable decorator is imported to mark providers, and the AppService is exported from the module.

5fill in blank

hard

Fill all three blanks to define an injectable service with a method and inject it into a controller.

NestJS

import { [1] } from '@nestjs/common';

@[1]()
export class GreetingService {
  sayHello(): string {
    return 'Hello!';
  }
}

import { Controller } from '@nestjs/common';
import { GreetingService } from './greeting.service';

@Controller()
export class GreetingController {
  constructor(private readonly {{BLANK_3}}: GreetingService) {}

  greet(): string {
    return this.{{BLANK_3}}.sayHello();
  }
}

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

AInjectable

BgreetingService

CGreetingService

Dservice

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name 'GreetingService' as the injected variable name.

Forgetting to import Injectable.

The Injectable decorator is used twice: once for import and once for decorating the class. The injected property name is camelCase 'greetingService'.

Practice

1. What is the main purpose of the @Injectable() decorator in NestJS?

easy

A. To style components with CSS

B. To define a route handler in a controller

C. To create a database connection automatically

D. To mark a class so NestJS can manage it for dependency injection

Solution

1. Step 1: Understand the role of @Injectable()

   This decorator tells NestJS that the class can be injected as a dependency, making it reusable and manageable by the framework.

2. Step 2: Differentiate from other decorators

   Other decorators like @Controller() or database decorators serve different purposes, not dependency injection.

3. Final Answer:

   To mark a class so NestJS can manage it for dependency injection -> Option D

4. Quick Check:

   @Injectable() = marks class for DI [OK]

Hint: Remember: @Injectable() means NestJS manages the class [OK]

Common Mistakes:

• Confusing @Injectable() with @Controller()
• Thinking it creates routes or database connections
• Assuming it styles components

2. Which of the following is the correct syntax to make a service class injectable in NestJS?

easy

A. function Injectable() { return class MyService {} }

B. class MyService {}

C. @Injectable() class MyService {}

D. @Injectable class MyService {}

Solution

1. Step 1: Recall correct decorator syntax

   In NestJS, decorators are functions called with parentheses, so @Injectable() is correct.

2. Step 2: Check each option

   class MyService {} lacks the decorator. function Injectable() { return class MyService {} } is invalid syntax. @Injectable class MyService {} misses parentheses after @Injectable.

3. Final Answer:

   @Injectable() class MyService {} -> Option C

4. Quick Check:

   Decorator syntax requires parentheses () [OK]

Hint: Always use parentheses with decorators like @Injectable() [OK]

Common Mistakes:

• Omitting parentheses after @Injectable
• Trying to use @Injectable without decorator syntax
• Confusing class and function syntax

3. Given the following code, what will be the output when appService.getMessage() is called?

import { Injectable } from '@nestjs/common';

@Injectable()
class AppService {
  getMessage() {
    return 'Hello from AppService';
  }
}

const appService = new AppService();
console.log(appService.getMessage());

medium

A. Hello from AppService

B. undefined

C. Error: AppService is not injectable

D. null

Solution

1. Step 1: Understand @Injectable() effect on class instantiation

   The @Injectable() decorator marks the class for NestJS DI but does not change normal instantiation behavior.

2. Step 2: Analyze the code execution

   The code creates an instance manually and calls getMessage(), which returns the string as expected.

3. Final Answer:

   Hello from AppService -> Option A

4. Quick Check:

   Manual instantiation still works; method returns string [OK]

Hint: Manual new works; decorator doesn't block normal class use [OK]

Common Mistakes:

• Assuming decorator breaks manual instantiation
• Expecting an error without NestJS container
• Thinking method returns undefined

4. Identify the error in this NestJS service code:

import { Injectable } from '@nestjs/common';

@Injectable
export class UserService {
  getUser() {
    return 'User data';
  }
}

medium

A. Missing parentheses after @Injectable decorator

B. Class name should be lowercase

C. Method getUser must be async

D. Missing export keyword

Solution

1. Step 1: Check decorator syntax

   The @Injectable decorator must be called with parentheses: @Injectable().

2. Step 2: Verify other code parts

   Class name casing is correct by convention. Method need not be async. Export keyword is present.

3. Final Answer:

   Missing parentheses after @Injectable decorator -> Option A

4. Quick Check:

   Decorator requires () to work properly [OK]

Hint: Always add () after decorators like @Injectable() [OK]

Common Mistakes:

• Forgetting parentheses after decorator
• Thinking method must be async
• Confusing export keyword presence

5. You want to create a reusable logging service in NestJS that other services can inject. Which of the following is the best way to define it?

hard

A. Create a class without @Injectable() and instantiate it manually everywhere

B. Use @Injectable() on the logging class and inject it where needed

C. Define logging functions in a plain JavaScript object and export it

D. Use @Controller() decorator on the logging class

Solution

1. Step 1: Understand dependency injection benefits

   Using @Injectable() allows NestJS to manage the logging service lifecycle and inject it automatically where needed.

2. Step 2: Evaluate options for reusability and testability

   Manual instantiation loses DI benefits. Plain objects lack lifecycle and DI. @Controller() is for routing, not services.

3. Final Answer:

   Use @Injectable() on the logging class and inject it where needed -> Option B

4. Quick Check:

   Injectable services = reusable and testable [OK]

Hint: Always use @Injectable() for reusable NestJS services [OK]

Common Mistakes:

• Skipping @Injectable() and instantiating manually
• Using @Controller() for services
• Using plain objects without DI benefits