Declarations, imports, and exports 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 a string like 'true' instead of the boolean true.

Setting standalone to false or null.

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

2fill in blank

medium

Complete the code to import the CommonModule in an Angular standalone component.

Angular

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

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

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

AFormsModule

BHttpClientModule

CRouterModule

DCommonModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FormsModule instead of CommonModule.

Forgetting to import CommonModule when using structural directives.

The 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 exports array of an Angular NgModule.

Angular

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';

@NgModule({
  declarations: [FeatureComponent],
  imports: [CommonModule],
  exports: [[1]]
})
export class FeatureModule {}

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

ACommonModule

BFeatureComponent

CFeatureModule

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Exporting the module itself instead of the component.

Exporting CommonModule which is imported, not declared here.

The exports array should list components, directives, or pipes to make them available outside the module. Here, FeatureComponent is correct.

4fill in blank

hard

Fill both blanks to correctly import and export a component in an Angular NgModule.

Angular

import { NgModule } from '@angular/core';
import { SharedComponent } from './shared.component';

@NgModule({
  declarations: [[1]],
  exports: [[2]]
})
export class SharedModule {}

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

ASharedComponent

BCommonModule

CSharedModule

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the module name instead of the component.

Exporting something not declared.

You must declare the component in declarations and export the same component in exports to share it with other modules.

5fill in blank

hard

Fill all three blanks to create a standalone component that imports FormsModule and exports itself.

Angular

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

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

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

ACommonModule

BFormsModule

CInputComponent

DNgModule

Attempts:

3 left

💡 Hint

Common Mistakes

Importing CommonModule instead of FormsModule.

Using wrong class name for the component.

To use two-way binding with ngModel, you must import FormsModule. The component class name is InputComponent.