Standalone component declaration in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare 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'

Afalse

Btrue

C'yes'

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

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

Omitting the 'standalone' property entirely.

Setting standalone: true declares the component as standalone, meaning it does not require a module.

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'

ACommonModule

BFormsModule

CRouterModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule instead of CommonModule.

Forgetting to import any module for common directives.

CommonModule provides common directives like ngIf and ngFor, and must be imported explicitly in standalone components.

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'

Aselector

Bimports

CtemplateUrl

Dstandalone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'imports' instead of 'standalone'.

Using 'templateUrl' instead of 'standalone'.

The property to declare a standalone component is 'standalone', set to true.

4fill in blank

hard

Fill both blanks to declare a standalone component that imports FormsModule.

Angular

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

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [[2]],
  template: `<input [(ngModel)]="name">`
})
export class FormComponent {
  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.

FormsModule must be imported and added to the imports array to use ngModel in a standalone component.

5fill in blank

hard

Fill all three blanks to create a standalone component that imports RouterModule and CommonModule and uses a selector.

Angular

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

@Component({
  selector: '[3]',
  standalone: true,
  imports: [RouterModule, CommonModule],
  template: `<nav>Navigation here</nav>`
})
export class NavComponent {}

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

ARouterModule

BCommonModule

Capp-nav

DFormsModule

Attempts:

3 left

💡 Hint

Common Mistakes

Using FormsModule instead of CommonModule.

Using an invalid selector string.

RouterModule and CommonModule must be imported from their packages, and the selector should be a valid string like 'app-nav'.