How Angular differs from React and Vue - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a standalone Angular component.

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `<h1>Hello Angular!</h1>`,
  standalone: [1]
})
export class HelloComponent {}

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

Atrue

Bundefined

Cnull

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it causes the component to require NgModules.

Angular standalone components require standalone: true to work without NgModules.

2fill in blank

medium

Complete the code to update a signal in Angular 17+.

Angular

import { Component, signal, inject } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-counter',
  template: `<button (click)="increment()">Count: {{ count() }}</button>`
})
export class CounterComponent {
  count = signal(0);
  increment() {
    [1].set([1]() + 1);
  }
}

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

Athis.count

Bcount

Cthis.count()

Dcount()

Attempts:

3 left

💡 Hint

Common Mistakes

Using the signal variable directly without calling it as a function.

To update a signal, call it as a function to get its current value, then set the new value.

3fill in blank

hard

Fix the error in the Angular template syntax.

Angular

<button (click)="[1]()">Click me</button>

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

A"increment"

Bincrement

Cincrement()

D(increment)

Attempts:

3 left

💡 Hint

Common Mistakes

Using double curly braces inside event bindings causes errors.

In Angular templates, event bindings use the function name with parentheses inside the quotes.

4fill in blank

hard

Fill both blanks to use Angular's new control flow directives for a list.

Angular

<ul>
  @if ([1]) {
    @for (let item of items; track item) {
      <li>{{ item }}</li>
    }
  } @else if ([2]) {
    <p>No items</p>
  }
</ul>

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

Aitems.length > 0

Bitems.length === 0

Citems

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong variable or condition in the @if directive.

Use @if with a condition to show the list only if it has items, and else for the empty case.

5fill in blank

hard

Fill all three blanks to create a reactive form control with Angular signals.

Angular

import { Component, signal } from '@angular/core';

@Component({
  standalone: true,
  selector: 'app-input',
  template: `<input [value]="[1]" (input)="[2].set($event.target.value)" />`
})
export class InputComponent {
  [3] = signal('');
}

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

AinputValue()

BinputValue

Attempts:

3 left

💡 Hint

Common Mistakes

Not calling the signal as a function to get its value.

The input's value is read by calling the signal as a function. The signal variable is updated on input events.