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.