Facade service pattern in Angular - Step-by-Step Execution

Concept Flow - Facade service pattern

Component calls Facade Service

↓

Facade Service receives call

↓

Calls Data Service

↓

Data fetched

↓

Facade returns combined data/state

↓

Component updates view

The component talks only to the Facade Service, which handles calls to data and UI state services, then returns combined results back to the component.

Execution Sample

Angular

export class UserFacade {
  constructor(private userService: UserService, private uiStateService: UiStateService) {}

  loadUser() {
    this.uiStateService.setLoading(true);
    return this.userService.getUser().pipe(
      tap(() => this.uiStateService.setLoading(false))
    );
  }
}

This facade method sets loading state, calls user data service, then clears loading state after data arrives.

Execution Table

Step	Action	State Before	State After	Output/Effect
1	Component calls facade.loadUser()	uiState.loading = false	uiState.loading = true	Loading indicator shown
2	Facade calls userService.getUser()	user data = null	user data = fetching	Data request sent
3	UserService returns user data	user data = fetching	user data = {name: 'Alice'}	User data received
4	Facade calls uiStateService.setLoading(false)	uiState.loading = true	uiState.loading = false	Loading indicator hidden
5	Facade returns user data observable	N/A	N/A	Component receives user data
6	Component updates view with user data	View empty	View shows user name 'Alice'	User info displayed

💡 Facade completes data fetch and UI state update, component finishes rendering user info.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
uiState.loading	false	true	true	true	false	false
user data	null	null	fetching	{name: 'Alice'}	{name: 'Alice'}	{name: 'Alice'}
component view	empty	empty	empty	empty	empty	shows 'Alice'

Key Moments - 3 Insights

Why does the facade set loading to true before calling the data service?

Setting loading to true before fetching data shows the user a loading indicator early, as seen in step 1 of the execution_table.

How does the facade keep the component simple?

The facade hides calls to multiple services and manages UI state, so the component only calls one method and gets combined results, shown in steps 1 and 5.

When does the loading indicator get hidden?

After user data arrives, the facade sets loading to false in step 4, hiding the indicator before the component updates the view.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of uiState.loading after step 2?

A true

B false

C null

D undefined

💡 Hint

Check the 'State After' column for uiState.loading in step 2.

At which step does the facade receive the user data from the service?

A Step 1

B Step 3

C Step 4

D Step 5

💡 Hint

Look for when 'UserService returns user data' in the Action column.

If the facade did not set loading to false after data arrives, what would happen?

A User data would not load

B Component would crash

C Loading indicator would stay visible

D Nothing changes

💡 Hint

Refer to step 4 where loading is set to false to hide the indicator.

Concept Snapshot

Facade Service Pattern in Angular:
- Facade acts as a single interface for components.
- It calls multiple services internally (data, UI state).
- Manages UI states like loading indicators.
- Simplifies component code by hiding complexity.
- Returns combined data/state to component.

Full Transcript

The Facade Service Pattern in Angular helps components by providing a simple interface to complex service calls. The component calls the facade, which sets UI loading state, fetches data from a data service, then clears the loading state. This keeps the component clean and focused on displaying data. The execution trace shows the loading state changing before and after data fetch, and the component updating the view once data arrives. This pattern improves code organization and user experience by managing UI states centrally.

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