Why standalone components matter in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a standalone component in Angular.

Angular

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

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

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

Afalse

B'yes'

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string instead of a boolean for 'standalone'.

Setting 'standalone' to false or null.

Setting standalone: true makes the component standalone, so it doesn't need to be declared in an NgModule.

2fill in blank

medium

Complete the code to import the CommonModule in a standalone component.

Angular

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [CommonModule],
  template: `<p>Example works!</p>`
})
export class ExampleComponent {}

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

AFormsModule

BCommonModule

CRouterModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing unrelated modules like FormsModule or RouterModule.

Forgetting to import CommonModule when using structural directives.

The CommonModule provides common directives like ngIf and ngFor which are often needed in templates.

3fill in blank

hard

Fix the error in the standalone component declaration by completing the missing property.

Angular

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

@Component({
  selector: 'app-fix',
  template: `<p>Fix me!</p>`,
  [1]: true
})
export class FixComponent {}

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

Astandalone

Bimports

Cproviders

Dbootstrap

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'imports' or 'providers' instead of 'standalone'.

Omitting the 'standalone' property.

The property standalone must be set to true to declare a standalone component.

4fill in blank

hard

Fill both blanks to create a standalone component that imports FormsModule and declares a template with two-way binding.

Angular

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

@Component({
  selector: 'app-input',
  standalone: true,
  imports: [[2]],
  template: `<input [(ngModel)]="name" /> <p>Hello {{name}}</p>`
})
export class InputComponent {
  name = '';
}

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

AFormsModule

BCommonModule

CRouterModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing CommonModule instead of FormsModule.

Forgetting to add FormsModule to the imports array.

To use two-way binding with ngModel, you must import FormsModule and include it in the imports array.

5fill in blank

hard

Fill all three blanks to create a standalone component that imports RouterModule, uses inject() to get Router, and navigates on button click.

Angular

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

@Component({
  selector: 'app-navigate',
  standalone: true,
  imports: [RouterModule],
  template: `<button (click)="goHome()">Go Home</button>`
})
export class NavigateComponent {
  router = [3](Router);

  goHome() {
    this.router.navigate(['/home']);
  }
}

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

Ainject

BRouterModule

DRouter

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing 'inject' with 'Injectable'.

Not importing RouterModule or Router correctly.

Using constructor injection instead of inject() function.

Use inject from '@angular/core' to get the Router instance. Import RouterModule for routing features.