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.

Practice

1. In Angular, what is the main purpose of the declarations array inside an NgModule?

easy

A. To list components, directives, and pipes that belong to this module

B. To import other modules into this module

C. To export components to be used in other modules

D. To configure services for dependency injection

Solution

1. Step 1: Understand the role of declarations in NgModule

   The declarations array is used to tell Angular which components, directives, and pipes belong to this module.

2. Step 2: Differentiate declarations from imports and exports

   Imports bring in other modules, exports share parts with other modules, and declarations define what is inside this module.

3. Final Answer:

   To list components, directives, and pipes that belong to this module -> Option A

4. Quick Check:

   Declarations = Own components/directives/pipes [OK]

Hint: Declarations list what belongs inside the module [OK]

Common Mistakes:

• Confusing declarations with imports
• Thinking declarations export components
• Mixing declarations with service providers

2. Which of the following is the correct way to import the CommonModule into an Angular module?

easy

A. declarations: [CommonModule]

B. imports: [CommonModule]

C. exports: [CommonModule]

D. providers: [CommonModule]

Solution

1. Step 1: Identify where modules are added

   Other modules like CommonModule are added inside the imports array to bring their features in.

2. Step 2: Confirm correct syntax

   Using imports: [CommonModule] is the correct syntax to import a module.

3. Final Answer:

   imports: [CommonModule] -> Option B

4. Quick Check:

   Modules go in imports [OK]

Hint: Modules go inside imports array [OK]

Common Mistakes:

• Putting modules in declarations instead of imports
• Using exports to import modules
• Adding modules to providers

3. Given this Angular module snippet:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './my.component';

@NgModule({
  declarations: [MyComponent],
  imports: [CommonModule],
  exports: []
})
export class MyModule {}

Which of the following is true about MyComponent?

medium

A. It can be used in templates of components declared in other modules without importing MyModule

B. It is automatically exported to all modules because it is declared

C. It can only be used inside templates of components declared in MyModule

D. It must be added to imports to be used

Solution

1. Step 1: Check declarations and exports

   MyComponent is declared but not exported in MyModule.

2. Step 2: Understand component visibility

   Declared components are only usable inside the module unless exported. Since MyComponent is not exported, other modules cannot use it.

3. Final Answer:

   It can only be used inside templates of components declared in MyModule -> Option C

4. Quick Check:

   Declared but not exported = local use only [OK]

Hint: Only exported components are usable outside the module [OK]

Common Mistakes:

• Assuming declarations export components automatically
• Thinking imports export components
• Confusing imports with declarations

4. What is wrong with this Angular module code?

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

@NgModule({
  declarations: [],
  imports: [BrowserModule, MyComponent],
  exports: [MyComponent]
})
export class AppModule {}

medium

A. exports cannot include components

B. BrowserModule cannot be imported

C. MyComponent should be in providers

D. MyComponent should be in declarations, not imports

Solution

1. Step 1: Identify where components belong

   Components like MyComponent must be listed in declarations, not imports.

2. Step 2: Check imports and exports usage

   Modules go in imports, components go in declarations. Exporting components is allowed.

3. Final Answer:

   MyComponent should be in declarations, not imports -> Option D

4. Quick Check:

   Components belong in declarations [OK]

Hint: Components go in declarations, modules in imports [OK]

Common Mistakes:

• Putting components inside imports
• Thinking exports can't include components
• Confusing providers with declarations

5. You have two Angular modules: SharedModule declares and exports a component ButtonComponent. You want to use ButtonComponent inside FeatureModule. Which is the correct way to set this up?

hard

A. Import SharedModule in FeatureModule without declaring ButtonComponent again

B. Import SharedModule in FeatureModule and add ButtonComponent to declarations in FeatureModule

C. Add ButtonComponent to declarations in FeatureModule only

D. Export FeatureModule from SharedModule

Solution

1. Step 1: Understand exports and imports

   SharedModule exports ButtonComponent, so importing SharedModule in FeatureModule makes ButtonComponent available.

2. Step 2: Avoid redeclaring exported components

   Do not redeclare ButtonComponent in FeatureModule; just import SharedModule.

3. Final Answer:

   Import SharedModule in FeatureModule without declaring ButtonComponent again -> Option A

4. Quick Check:

   Import module exporting component, no redeclaration needed [OK]

Hint: Import module exporting component, no redeclare [OK]

Common Mistakes:

• Redeclaring exported components in importing module
• Not importing the module that exports the component
• Trying to export the importing module instead