When NgRx is overkill in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular service for simple state management.

Angular

import { [1] } from '@angular/core';

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

AComponent

BDirective

CNgModule

DInjectable

Attempts:

3 left

💡 Hint

Common Mistakes

Using @Component instead of @Injectable

Confusing NgModule with Injectable

The @Injectable decorator is used to create services for simple state management without NgRx.

2fill in blank

medium

Complete the code to create a simple state variable in the service.

Angular

export class CounterService {
  count = [1];
}

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

A'zero'

Bnull

C0

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'zero' as a string

Setting count to null or undefined

We initialize the count with 0 as a number, not a string or null.

3fill in blank

hard

Fix the error in the method that increments the count.

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 = instead of +=

Using == which is a comparison

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

4fill in blank

hard

Fill both blanks to create a simple Angular component that uses the service.

Angular

constructor(private [1]: [2]) {}

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

AcounterService

BCounterService

CCounterComponent

DcounterComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping variable and class names

Using component names instead of service

The constructor injects the service using a variable name and its class type.

5fill in blank

hard

Fill all three blanks to update the template to show count and a button to increment.

Angular

<p>Count: {{ [1].[2] }}</p>
<button (click)="[3]()">Increment</button>

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

AcounterService

Bcount

Cincrement

DCounterService

Attempts:

3 left

💡 Hint

Common Mistakes

Using class name instead of variable in template

Calling wrong method name

The template accesses the service variable and method via the injected variable name.