Facade service pattern in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Angular facade service component output?

Consider this Angular component using a facade service to get user data.

import { Component } from '@angular/core';
import { UserFacade } from './user.facade';

@Component({
  selector: 'app-user',
  template: `User: {{ userName }}`
})
export class UserComponent {
  userName = '';
  constructor(private userFacade: UserFacade) {
    this.userFacade.getUserName().subscribe(name => this.userName = name);
  }
}

The UserFacade returns an observable emitting 'Alice'.

What will the component display?

Angular

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

@Injectable({ providedIn: 'root' })
export class UserFacade {
  getUserName() {
    return of('Alice');
  }
}

A User: undefined

B User: Alice

C User: null

D User: '' (empty string)

💡 Hint

Think about what the observable emits and how the subscription updates userName.

The facade service returns an observable emitting 'Alice'. The component subscribes and sets userName to 'Alice', so the template shows 'User: Alice'.

❓ state_output

intermediate

What is the value of isLoading after facade call?

Given this Angular facade service and component snippet:

export class DataFacade {
  isLoading = false;
  fetchData() {
    this.isLoading = true;
    setTimeout(() => this.isLoading = false, 1000);
  }
}

@Component({ selector: 'app-data', template: `Loading: {{ facade.isLoading }}` })
export class DataComponent {
  constructor(public facade: DataFacade) {
    this.facade.fetchData();
  }
}

Immediately after fetchData() is called, what is the value of facade.isLoading?

A true

B false

C undefined

D null

💡 Hint

Consider the synchronous and asynchronous parts of fetchData().

The method sets isLoading to true immediately, then resets it to false after 1 second asynchronously. So right after calling, it is true.

📝 Syntax

advanced

Which option correctly injects a facade service in Angular 17 standalone component?

Angular 17 supports standalone components and the new inject() function.

Which code snippet correctly injects UserFacade in a standalone component?

A

@Component({ standalone: true, selector: 'app-user', template: '' })
export class UserComponent {
  userFacade = inject(UserFacade);
}

B

const userFacade = inject(UserFacade);

@Component({ standalone: true, selector: 'app-user', template: '' })
export class UserComponent {
  constructor() {
    console.log(userFacade);
  }
}

C

@Component({ standalone: true, selector: 'app-user', template: '' })
export class UserComponent {
  constructor(private userFacade: UserFacade) {}
}

D

@Component({ standalone: true, selector: 'app-user', template: '' })
export class UserComponent {
  userFacade = new UserFacade();
}

💡 Hint

Remember that inject() is used inside class bodies, not outside.

Option A correctly uses inject(UserFacade) inside the class body to inject the service in a standalone component. Option A uses inject() outside the class, which is invalid. Option A uses constructor injection, valid but not using inject(). Option A manually creates the service, which breaks Angular DI.

🔧 Debug

advanced

Why does this facade service cause a memory leak?

Look at this Angular facade service:

@Injectable({ providedIn: 'root' })
export class ProductFacade {
  products$;
  constructor(private api: ApiService) {
    this.products$ = this.api.getProducts();
  }
}

The component subscribes to products$ but never unsubscribes. Why is this a problem?

A Because <code>products$</code> is a cold observable and never completes, causing subscriptions to stay active.

B Because the facade service is not provided in the component, so Angular creates multiple instances.

C Because the component should unsubscribe manually to avoid memory leaks from long-lived subscriptions.

D Because the facade does not use <code>shareReplay</code> or caching, causing multiple API calls.

💡 Hint

Think about Angular subscriptions and component lifecycle.

The observable products$ is subscribed to in the component. If the component does not unsubscribe before destruction, the subscription stays active, causing a memory leak. The facade itself is fine, but the component must manage subscriptions.

🧠 Conceptual

expert

Which statement best describes the main benefit of the facade service pattern in Angular?

Choose the best explanation of why using a facade service is helpful in Angular applications.

A It forces all components to share the same service instance, preventing any state duplication.

B It replaces Angular's dependency injection system with a manual service locator pattern.

C It automatically caches all API responses to improve performance without extra code.

D It hides complex state management and API calls behind a simple interface, reducing component complexity and improving maintainability.

💡 Hint

Think about how facades simplify component code and separate concerns.

The facade pattern provides a simple interface to complex logic like state and API calls. This keeps components clean and easier to maintain. It does not replace DI or automatically cache data.