Facade service pattern in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to inject the facade service into the component constructor.

Angular

constructor(private [1]: UserFacade) {}

Drag options to blanks, or click blank then click option'

AuserFacade

BUserFacade

CfacadeUser

Duser_service

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name instead of a variable name.

Using underscores in variable names.

Capitalizing the first letter of the variable.

In Angular, services are injected by specifying a private variable name in the constructor. The variable name should be camelCase, like userFacade.

2fill in blank

medium

Complete the code to call the facade's method to load users inside ngOnInit.

Angular

ngOnInit() {
  this.userFacade.[1]();
}

Drag options to blanks, or click blank then click option'

AfetchUsers

BloadUsers

CgetUsers

DretrieveUsers

Attempts:

3 left

💡 Hint

Common Mistakes

Using method names that are not defined in the facade.

Using verbs like 'get' or 'fetch' which might not be the facade's method.

The facade service typically provides a method named loadUsers to trigger loading users from the backend.

3fill in blank

hard

Fix the error in the facade service method to return the users observable.

Angular

getUsers(): Observable<User[]> {
  return this.store.[1](selectUsers);
}

Drag options to blanks, or click blank then click option'

Apipe

Bdispatch

Cselect

Dsubscribe

Attempts:

3 left

💡 Hint

Common Mistakes

Using dispatch which is for sending actions, not selecting data.

Using subscribe inside the facade which breaks observable chaining.

To get data from the store, the facade uses select with a selector function.

4fill in blank

hard

Fill both blanks to create a facade method that dispatches an action to add a user.

Angular

addUser(user: User) {
  this.store.[1](new [2](user));
}

Drag options to blanks, or click blank then click option'

Adispatch

Bselect

CAddUserAction

DLoadUsersAction

Attempts:

3 left

💡 Hint

Common Mistakes

Using select instead of dispatch.

Using the wrong action name that does not add a user.

The facade dispatches an action to the store using dispatch. The action to add a user is typically named AddUserAction.

5fill in blank

hard

Fill all three blanks to create a facade observable for users with error handling.

Angular

users$ = this.store.[1](selectUsers).[2](catchError(() => of([])));

constructor(private store: Store) {
  this.users$ = this.users$.[3]();
}

Drag options to blanks, or click blank then click option'

Aselect

Bpipe

CshareReplay

Ddispatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using dispatch instead of select.

Not using pipe to chain operators.

Forgetting to share the observable with shareReplay.

The facade selects users from the store using select, then uses pipe to add error handling with catchError. Finally, shareReplay is used to share the observable result efficiently.