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

Need a 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
}

Need a 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
  }
}

Need a 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

Need a hint?

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