Migrating from NgModules in Angular - Interactive Code Practice

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'

Atrue

Bfalse

C'yes'

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'false' or string values instead of boolean true.

Omitting the 'standalone' property entirely.

Setting standalone: true makes the component standalone, removing the need for NgModules.

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-list',
  template: `<ul><li *ngFor="let item of items">{{item}}</li></ul>`,
  standalone: true,
  imports: [CommonModule]
})
export class ListComponent {
  items = ['One', 'Two', 'Three'];
}

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

AFormsModule

BBrowserModule

CCommonModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule instead of CommonModule in standalone components.

Forgetting to import CommonModule when using structural directives.

The CommonModule provides common directives like *ngFor and *ngIf needed in templates.

3fill in blank

hard

Fix the error in the standalone component by completing the imports array.

Angular

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

@Component({
  selector: 'app-nav',
  template: `<a routerLink="/home">Home</a>`,
  standalone: true,
  imports: [[1]]
})
export class NavComponent {}

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

ABrowserModule

BRouterModule

CFormsModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule instead of RouterModule.

Not importing any module, causing template errors.

The RouterModule must be imported in standalone components to use routerLink directive.

4fill in blank

hard

Fill both blanks to define a standalone component that uses FormsModule and declares a template variable.

Angular

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

@Component({
  selector: 'app-input',
  template: `<input #inputRef type="text" [(ngModel)]="name">`,
  standalone: true,
  imports: [[2]]
})
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 for ngModel.

Forgetting to add FormsModule to imports array.

The FormsModule is needed to use ngModel for two-way binding in standalone components.

5fill in blank

hard

Fill all three blanks to create a standalone component that imports CommonModule, uses a signal, and displays its value.

Angular

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

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

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

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

ACommonModule

Csignal

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormsModule instead of CommonModule for template directives.

Not using signal() to create reactive state.

The component imports CommonModule for common directives and uses Angular's signal to create a reactive state.