Standalone vs module-based decision in Angular - Interactive 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

Setting standalone to false or a string instead of true.

Omitting the standalone property.

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

2fill in blank

medium

Complete the code to import a standalone component into another standalone component.

Angular

import { Component } from '@angular/core';
import { HelloComponent } from './hello.component';

@Component({
  selector: 'app-main',
  template: `<app-hello></app-hello>`,
  standalone: true,
  imports: [[1]]
})
export class MainComponent {}

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

ANgModule

BBrowserModule

CHelloComponent

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to import NgModule or CommonModule instead of the component.

Not adding the component to the imports array.

Standalone components must be imported by listing them in the imports array of the consuming standalone component.

3fill in blank

hard

Fix the error in this module-based Angular module declaration.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [[1]],
  imports: [BrowserModule],
  bootstrap: [HelloComponent]
})
export class AppModule {}

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

ABrowserModule

BHelloComponent

CAppComponent

DMainComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Putting modules like BrowserModule in declarations instead of imports.

Declaring a component not imported or declared elsewhere.

The component to be declared in the module must be listed in the declarations array. Here, HelloComponent is the correct component.

4fill in blank

hard

Fill both blanks to create a standalone component that uses CommonModule and FormsModule.

Angular

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

@Component({
  selector: 'app-form',
  template: `<form></form>`,
  standalone: true,
  imports: [CommonModule, FormsModule]
})
export class FormComponent {}

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

ACommonModule

BFormsModule

CBrowserModule

DHttpClientModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing BrowserModule in standalone components instead of CommonModule.

Forgetting to import FormsModule when using forms.

To use common directives and forms features in a standalone component, import CommonModule from '@angular/common' and FormsModule from '@angular/forms'.

5fill in blank

hard

Fill all three blanks to convert a module-based component to standalone with imports.

Angular

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

@Component({
  selector: 'app-user',
  template: `<input [(ngModel)]="name">`,
  standalone: [3],
  imports: [CommonModule, FormsModule]
})
export class UserComponent {
  name = '';
}

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

ACommonModule

BFormsModule

Ctrue

Dfalse

Attempts:

3 left

💡 Hint

Common Mistakes

Setting standalone to false or omitting it.

Not importing FormsModule when using ngModel.

To make the component standalone, set standalone to true and import CommonModule and FormsModule for common directives and forms support.