Why components are the building blocks in Angular - Test Your Understanding

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

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

Using null or undefined is invalid for standalone.

The standalone property must be set to true to make the component standalone in Angular 17+.

2fill in blank

medium

Complete the code to inject a service into a standalone component.

Angular

import { Component, inject } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-data',
  template: `<p>{{ data }}</p>`,
  standalone: true
})
export class DataComponent {
  dataService = [1](DataService);
  data = this.dataService.getData();
}

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

Anew

Binject

CuseService

Dprovide

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'new' to create service instances bypasses Angular's DI system.

Using non-existent functions like 'useService' or 'provide' here.

In Angular 17+, the inject() function is used to get a service instance inside standalone components.

3fill in blank

hard

Fix the error in the component template binding.

Angular

<template>
  <h2>[1]</h2>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const title = ref('Welcome to Angular');
</script>

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

Atitle.value

Btitle()

Cthis.title

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using Vue.js reactive syntax in Angular templates.

Trying to access '.value' on properties in Angular.

In Angular templates, you bind directly to the property name without '.value' or function calls. The code is mixing Vue syntax; in Angular, use just {{ title }}.

4fill in blank

hard

Fill both blanks to create a component with a signal and display its value.

Angular

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

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

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

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

Asignal

Bthis.count()

Ccount

Dsignal()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign to the signal directly instead of calling it.

Using 'count' without 'this' inside the method.

The signal function creates a reactive value. To update it, call this.count() with the new value.

5fill in blank

hard

Fill all three blanks to create a component that uses a signal and a computed signal.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `<p>{{ greeting() }}</p>`,
  standalone: true
})
export class GreetingComponent {
  name = [1]('Alice');
  greeting = [2](() => `Hello, ${this.name()}`);

  changeName(newName: string) {
    this.name([3]);
  }
}

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

Asignal

Bcomputed

CnewName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' instead of 'newName' when updating the signal.

Not using computed for derived reactive values.

Use signal to create reactive state, computed to create derived state, and update the signal by calling it with the new value.