What is Angular - Interactive Quiz & 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

Bfalse

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using false or null instead of true for standalone.

Omitting the standalone property.

The standalone: true flag makes the component standalone in Angular 17+.

2fill in blank

medium

Complete the code to inject a signal in an Angular standalone component.

Angular

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

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

  increment() {
    this.count[1](c => c + 1);
  }
}

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

Aupdate

Bset

Creset

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using set which replaces the value instead of updating.

Using get which only reads the value.

The update method changes the signal value based on the current value.

3fill in blank

hard

Fix the error in the Angular component template binding.

Angular

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

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

AincrementClick

Bincrement()

Cincrement

DincrementClick()

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses inside the quotes causing syntax errors.

Using wrong method names.

In Angular templates, event bindings use method names without parentheses inside the quotes.

4fill in blank

hard

Fill both blanks to create a signal and read its value in Angular.

Angular

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

const count = [1](0);
console.log(count[2]());

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

Asignal

Bupdate

C()

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using update instead of get to read the value.

Calling signal without parentheses.

Create a signal with signal(0) and read its value with get().

5fill in blank

hard

Fill all three blanks to define a standalone Angular component with a signal and a button to increment it.

Angular

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

@Component({
  selector: 'app-clicker',
  template: `<button (click)="[2]()">Clicked {{ count() }} times</button>`,
  standalone: true
})
export class ClickerComponent {
  count = [3](0);

  increment() {
    this.count.update(c => c + 1);
  }
}

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

Asignal

Bincrement

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Not importing signal from Angular core.

Using wrong method name in template.

Not creating count as a signal.

Import signal, use increment as the click handler, and create count as a signal.