Facade service pattern in Angular - Mini Project: Build & Apply

Facade Service Pattern in Angular

📖 Scenario: You are building a simple Angular app that shows a list of books. The app gets book data from a service. To keep your components clean and simple, you will use a facade service. This facade will hide the details of how the data is fetched and provide a simple way for components to get the books.

🎯 Goal: Build an Angular facade service that wraps a book data service. The facade will provide a method to get all books. Then use this facade in a component to display the book titles.

📋 What You'll Learn

Create a book data service with a method returning a list of books

Create a facade service that uses the book data service internally

Facade service should have a method to get all books

Use the facade service in a component to display book titles

💡 Why This Matters

🌍 Real World

Facade services help keep Angular components simple by hiding complex data fetching or business logic behind a clean interface. This makes the app easier to maintain and test.

💼 Career

Many Angular jobs require understanding of service patterns like facades to build scalable and maintainable apps. This pattern is common in professional Angular development.

1

Create the Book Data Service

Create an Angular service called BookDataService with a method getBooks() that returns an array of book objects. Each book object should have id and title. Use these exact books: { id: 1, title: 'Angular Basics' }, { id: 2, title: 'Learning TypeScript' }, { id: 3, title: 'RxJS in Action' }.

Angular

// Create BookDataService with getBooks() method returning the exact books array
// Your code here

Hint

Use @Injectable({ providedIn: 'root' }) to make the service available app-wide. The getBooks() method should return the exact array of book objects.

2

Create the Facade Service

Create an Angular service called BookFacadeService. Inject BookDataService in its constructor. Add a method getAllBooks() that calls and returns the result of getBooks() from BookDataService.

Angular

import { Injectable } from '@angular/core';
import { BookDataService } from './book-data.service';

@Injectable({ providedIn: 'root' })
export class BookFacadeService {
  constructor(private bookDataService: BookDataService) {}

  // Add getAllBooks() method here
  // Your code here
}

Hint

Inject BookDataService in the constructor. The getAllBooks() method should return the result of getBooks() from the injected service.

3

Use Facade Service in Component

Create an Angular component called BookListComponent. Inject BookFacadeService in its constructor. Create a public property books and assign it the result of calling getAllBooks() from the facade service.

Angular

import { Component } from '@angular/core';
import { BookFacadeService } from './book-facade.service';

@Component({
  selector: 'app-book-list',
  template: `{{ book.title }}`
})
export class BookListComponent {
  books = [];

  constructor(private bookFacadeService: BookFacadeService) {
    // Assign books property here
    // Your code here
  }
}

Hint

Inject BookFacadeService in the constructor. Assign this.books by calling getAllBooks() from the facade.

4

Add Accessibility and Finalize Template

In the BookListComponent template, add an aria-label attribute with value 'List of books' to the <ul> element for accessibility. Ensure the component code and services remain unchanged.

Angular

import { Component } from '@angular/core';
import { BookFacadeService } from './book-facade.service';

@Component({
  selector: 'app-book-list',
  template: `{{ book.title }}`
})
export class BookListComponent {
  books = [];

  constructor(private bookFacadeService: BookFacadeService) {
    this.books = this.bookFacadeService.getAllBooks();
  }
}

// Services remain unchanged
// Your code here

Hint

Add aria-label="List of books" to the <ul> tag in the component template for better accessibility.

Practice

1.

What is the main purpose of using a Facade Service in Angular?

easy

A. To directly manipulate the DOM from services

B. To replace Angular modules with a single service

C. To simplify component code by hiding complex service logic behind simple methods

D. To create multiple instances of services for each component

Solution

1. Step 1: Understand the role of Facade Service

   A Facade Service acts as a simple interface hiding complex logic from components.

2. Step 2: Identify the benefit in Angular components

   This pattern keeps components clean and easier to maintain by centralizing service calls.

3. Final Answer:

   To simplify component code by hiding complex service logic behind simple methods -> Option C

4. Quick Check:

   Facade Service purpose = Simplify logic [OK]

Hint: Facade hides complexity behind simple methods [OK]

Common Mistakes:

• Thinking Facade replaces Angular modules
• Believing Facade manipulates DOM directly
• Assuming Facade creates multiple service instances

2.

Which of the following is the correct way to inject a facade service MyFacadeService into an Angular component constructor?

easy

A. constructor(private myFacadeService: MyFacadeService) {}

B. constructor(public MyFacadeService) {}

C. constructor(myFacadeService: new MyFacadeService()) {}

D. constructor(private myFacadeService = MyFacadeService) {}

Solution

1. Step 1: Recall Angular dependency injection syntax

   Angular injects services via constructor parameters with access modifiers and type annotations.

2. Step 2: Match correct syntax

   constructor(private myFacadeService: MyFacadeService) {} uses private and type MyFacadeService, which is correct.

3. Final Answer:

   constructor(private myFacadeService: MyFacadeService) {} -> Option A

4. Quick Check:

   Inject service with private + type [OK]

Hint: Use private and type in constructor for injection [OK]

Common Mistakes:

• Omitting access modifier (private/public)
• Using new keyword inside constructor parameters
• Assigning service without type annotation

3.

Given this facade service method:

getUserName(): Observable<string> {
  return this.userService.getUser().pipe(
    map(user => user.name)
  );
}

What will the component receive when subscribing to getUserName()?

medium

A. A synchronous string value of the user's name

B. An observable emitting the entire user object

C. A promise resolving to the user's name

D. An observable emitting the user's name as a string

Solution

1. Step 1: Analyze the facade method return type

   The method returns an Observable<string> by mapping the user object to user.name.

2. Step 2: Understand what subscribing receives

   Subscribing to this Observable emits the user's name string asynchronously.

3. Final Answer:

   An observable emitting the user's name as a string -> Option D

4. Quick Check:

   Facade returns Observable of user name [OK]

Hint: Facade returns Observable mapped to user name [OK]

Common Mistakes:

• Confusing Observable with Promise
• Expecting synchronous value instead of Observable
• Assuming entire user object is emitted

4.

Identify the error in this facade service method:

fetchData() {
  this.apiService.getData().subscribe(data => {
    this.data = data;
  });
  return this.data;
}

medium

A. Using arrow function inside subscribe is invalid syntax

B. Returns data before subscription completes, causing undefined result

C. Subscription should be inside component, not service

D. Missing return type annotation causes compile error

Solution

1. Step 1: Understand asynchronous subscription

   The subscribe callback runs later, so this.data is not set immediately.

2. Step 2: Identify return timing issue

   The method returns this.data immediately, likely undefined before data arrives.

3. Final Answer:

   Returns data before subscription completes, causing undefined result -> Option B

4. Quick Check:

   Async subscribe returns undefined early [OK]

Hint: Return inside subscribe or use Observable return [OK]

Common Mistakes:

• Returning data before async call finishes
• Thinking arrow functions are invalid in subscribe
• Believing subscription must be in component only

5.

You want to create a facade service that combines data from UserService and SettingsService and exposes a single observable userSettings$. Which approach correctly implements this?

class UserSettingsFacade {
  userSettings$: Observable<UserSettings>;

  constructor(private userService: UserService, private settingsService: SettingsService) {
    // Fill in here
  }
}

hard

A. this.userSettings$ = combineLatest([this.userService.getUser(), this.settingsService.getSettings()]).pipe(map(([user, settings]) => ({ user, settings })));

B. this.userSettings$ = this.userService.getUser().pipe(map(user => this.settingsService.getSettings()));

C. this.userSettings$ = this.userService.getUser() + this.settingsService.getSettings();

D. this.userSettings$ = forkJoin(this.userService.getUser(), this.settingsService.getSettings());

Solution

1. Step 1: Combine multiple observables correctly

   Use combineLatest to emit latest values from both observables together.

2. Step 2: Map combined values into single object

   Use map operator to create an object with user and settings properties.

3. Final Answer:

   this.userSettings$ = combineLatest([this.userService.getUser(), this.settingsService.getSettings()]).pipe(map(([user, settings]) => ({ user, settings }))); -> Option A

4. Quick Check:

   Use combineLatest + map to merge observables [OK]

Hint: Use combineLatest and map to merge observables [OK]

Common Mistakes:

• Using + operator to add observables
• Mapping one observable to another observable instead of values
• Using forkJoin which waits for all to complete once