Injecting services into components in Angular - Mini Project: Build & Apply

Injecting services into components

📖 Scenario: You are building a simple Angular app that shows a welcome message fetched from a service. This simulates how apps get data from services to display in components.

🎯 Goal: Create an Angular standalone component that uses a service to get a welcome message and display it.

📋 What You'll Learn

Create a service that returns a welcome message string

Create a standalone component

Inject the service into the component using Angular's dependency injection

Display the welcome message in the component template

💡 Why This Matters

🌍 Real World

Services in Angular are used to share data and logic across components. Injecting services into components is a core pattern for building scalable apps.

💼 Career

Understanding dependency injection and service usage is essential for Angular developer roles and building maintainable frontend applications.

1

Create the WelcomeService

Create a standalone Angular service called WelcomeService with a method getMessage() that returns the string 'Hello from WelcomeService!'.

Angular

// Create the WelcomeService with getMessage() method
// Your code here

Hint

Use @Injectable({ providedIn: 'root' }) to make the service available app-wide.

2

Create the WelcomeComponent

Create a standalone Angular component called WelcomeComponent with a template that displays {{ message }}. Import CommonModule and add it to imports. Initialize a public string property message with an empty string.

Angular

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

// Create the WelcomeComponent with a message property and template
// Your code here

Hint

Use @Component with standalone: true and import CommonModule for basic Angular directives.

3

Inject WelcomeService into WelcomeComponent

Modify the WelcomeComponent constructor to inject WelcomeService as a private parameter called welcomeService. Then, inside the constructor, set this.message to the value returned by welcomeService.getMessage().

Angular

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

@Injectable({
  providedIn: 'root'
})
export class WelcomeService {
  getMessage(): string {
    return 'Hello from WelcomeService!';
  }
}

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  imports: [CommonModule],
  template: `{{ message }}`
})
export class WelcomeComponent {
  message: string = '';

  constructor(private welcomeService: WelcomeService) {
    // Your code here
  }
}

Hint

Use Angular's constructor injection to get the service instance and call getMessage().

4

Use WelcomeComponent in the app

Add the app-welcome selector tag inside the bootstrap array of your main Angular module or use it in your main app component template to display the welcome message.

Angular

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

@Injectable({
  providedIn: 'root'
})
export class WelcomeService {
  getMessage(): string {
    return 'Hello from WelcomeService!';
  }
}

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

@Component({
  selector: 'app-welcome',
  standalone: true,
  imports: [CommonModule],
  template: `{{ message }}`
})
export class WelcomeComponent {
  message: string = '';

  constructor(private welcomeService: WelcomeService) {
    this.message = this.welcomeService.getMessage();
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [WelcomeComponent],
  template: `
    
  `
})
export class AppComponent {}

Hint

Use the <app-welcome></app-welcome> tag inside the root component template to show the welcome message.

Practice

1. What is the main purpose of injecting a service into an Angular component?

easy

A. To make the component run faster by compiling it differently

B. To automatically style the component with CSS

C. To change the component's HTML template dynamically

D. To allow the component to use shared functionality or data from the service

Solution

1. Step 1: Understand what services do in Angular

   Services hold shared logic or data that multiple components can use.

2. Step 2: Understand why components inject services

   Injecting a service lets the component access that shared logic or data easily.

3. Final Answer:

   To allow the component to use shared functionality or data from the service -> Option D

4. Quick Check:

   Service injection = shared code access [OK]

Hint: Services share code; injection lets components use it [OK]

Common Mistakes:

• Thinking injection changes component style
• Believing injection speeds up compilation
• Confusing service injection with template changes

2. Which is the correct way to inject a service named DataService into an Angular standalone component using the new inject() function?

easy

A. const dataService = inject(DataService); inside the component class body

B. constructor(private dataService: DataService) {} inside the component class

C. import { DataService } from './data.service'; outside the component

D. @Inject(DataService) dataService; inside the component class

Solution

1. Step 1: Recall the new inject() function usage

   In Angular 17+, inject() is called inside the component class body to get the service instance.

2. Step 2: Identify the correct syntax

   Using const dataService = inject(DataService); inside the class body is the correct pattern.

3. Final Answer:

   const dataService = inject(DataService); inside the component class body -> Option A

4. Quick Check:

   inject() function usage = const dataService = inject(DataService); inside the component class body [OK]

Hint: Use inject() inside class body for standalone components [OK]

Common Mistakes:

• Using constructor injection instead of inject() in standalone components
• Trying to use @Inject decorator incorrectly
• Confusing import statements with injection

3. Given this Angular component code snippet, what will be logged to the console?

import { Component, inject } from '@angular/core';
import { LoggerService } from './logger.service';

@Component({
  selector: 'app-sample',
  standalone: true,
  template: `
Check console
`,
  providers: [LoggerService]
})
export class SampleComponent {
  private logger = inject(LoggerService);

  constructor() {
    this.logger.log('Hello from SampleComponent');
  }
}

medium

A. Logs 'Hello from SampleComponent' to the console

B. Throws an error because LoggerService is not provided

C. Logs nothing because log() is not called

D. Logs 'undefined' because logger is not initialized

Solution

1. Step 1: Check service injection and provider

   The component provides LoggerService, so inject(LoggerService) works correctly.

2. Step 2: Check constructor behavior

   The constructor calls this.logger.log() with the message, so it logs to console.

3. Final Answer:

   Logs 'Hello from SampleComponent' to the console -> Option A

4. Quick Check:

   Service provided + log called = console output [OK]

Hint: Service must be provided to inject and use it [OK]

Common Mistakes:

• Forgetting to add service to providers array
• Assuming inject() fails without constructor
• Thinking log() is not called

4. Identify the error in this Angular component code that tries to inject AuthService:

import { Component, inject } from '@angular/core';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  standalone: true,
  template: `
Login
`
})
export class LoginComponent {
  private auth = inject(AuthService);

  constructor() {
    console.log(this.auth.isLoggedIn());
  }
}

medium

A. The selector name is invalid

B. AuthService is not listed in providers, so injection will fail

C. The constructor must receive AuthService as a parameter

D. inject() cannot be used inside the class body

Solution

1. Step 1: Check if AuthService is provided

   The component does not list AuthService in providers or globally, so Angular cannot create it.

2. Step 2: Understand inject() requirements

   inject() needs the service to be provided either in providers or root; otherwise, it throws an error.

3. Final Answer:

   AuthService is not listed in providers, so injection will fail -> Option B

4. Quick Check:

   Missing provider causes injection error [OK]

Hint: Always provide service before injecting it [OK]

Common Mistakes:

• Assuming inject() works without provider
• Confusing constructor injection with inject() function
• Ignoring providers array

5. You want to inject a UserService into two standalone components, ProfileComponent and SettingsComponent, so they share the same instance of the service. How should you provide UserService to achieve this?

hard

A. Use inject() without providing UserService anywhere

B. Add UserService to the providers array of both components separately

C. Provide UserService in the root injector using @Injectable({ providedIn: 'root' })

D. Create a new instance of UserService manually in each component

Solution

1. Step 1: Understand service scope and sharing

   Providing a service in root makes Angular create one shared instance app-wide.

2. Step 2: Compare with providing in components

   Providing in each component creates separate instances, so no sharing occurs.

3. Final Answer:

   Provide UserService in the root injector using @Injectable({ providedIn: 'root' }) -> Option C

4. Quick Check:

   Root provider = shared singleton service [OK]

Hint: Use providedIn: 'root' for shared singleton services [OK]

Common Mistakes:

• Providing service in each component causing multiple instances
• Forgetting to provide service at all
• Manually creating service instances instead of injecting