Service-based state management in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Angular

constructor(private [1]: CounterService) {}

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

AserviceCounter

Bcounter

CCounterService

DcounterService

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name directly instead of a variable name.

Using unrelated variable names.

In Angular, services are injected using a variable name with camelCase, usually the service class name starting with lowercase.

2fill in blank

medium

Complete the code to call the increment method from the service on button click.

Angular

<button (click)="[1].increment()">Increase</button>

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

Aincrement

BCounterService

CcounterService

Dservice

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of the instance variable.

Calling the method directly without the service instance.

The service instance variable is used to call methods, not the class name.

3fill in blank

hard

Fix the error in the service method to update the count correctly.

Angular

increment() {
  this.count [1] 1;
}

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

A+=

B-=

C==

D=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '=' which assigns but does not add.

Using '==' which is a comparison operator.

The '+=' operator adds 1 to the current count value.

4fill in blank

hard

Fill both blanks to create a getter that returns the current count from the service.

Angular

get currentCount() {
  return this.[1].[2];
}

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

AcounterService

Bcount

Cservice

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using the service class name instead of the instance variable.

Using incorrect property names.

The getter accesses the count property from the injected service instance.

5fill in blank

hard

Fill all three blanks to create a service method that resets count to zero and emits the new value.

Angular

reset() {
  this.[1] = [2];
  this.[3].next(this.count);
}

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

Acount

B0

CcountChanged

DresetCount

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names for count or the subject.

Assigning count to a string instead of zero.

The method sets count to zero and emits the updated count via the countChanged subject.