Declarations, imports, and exports in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Angular standalone component?

Consider this Angular standalone component code. What will be rendered in the browser?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `<button (click)="increment()">Count: {{ count() }}</button>`
})
export class CounterComponent {
  count = signal(0);
  increment() {
    this.count.update(c => c + 1);
  }
}

A A button showing 'Count: 0' initially and increments the number on each click.

B A button showing 'Count: 0' but does not update on clicks.

C A button showing 'Count: 1' initially and increments the number on each click.

D The component throws a runtime error because signals cannot be used in standalone components.

💡 Hint

Remember that signals hold reactive state and update the template automatically.

The count signal starts at 0. The template shows count() which reads the current value. Clicking the button calls increment() which updates the signal by adding 1. This causes the displayed number to increase.

Signals work perfectly in standalone components.

📝 Syntax

intermediate

Which import statement correctly imports the inject function in Angular 17+?

You want to use the new inject() function in Angular 17 standalone components. Which import statement is correct?

A import { inject } from '@angular/common';

B import { inject } from '@angular/forms';

C import { inject } from '@angular/core';

D import { inject } from '@angular/platform-browser';

💡 Hint

The inject function is part of Angular's core dependency injection system.

The inject() function is exported from @angular/core. Other packages do not export it.

🔧 Debug

advanced

Why does this Angular component fail to compile?

Look at this Angular standalone component code. Why does it fail to compile?

Angular

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

@Component({
  selector: 'app-sample',
  standalone: true,
  template: `<p>Hello World</p>`
})
export class SampleComponent {
}

@NgModule({
  declarations: [SampleComponent],
  imports: [],
  exports: [SampleComponent]
})
export class SampleModule {}

A The selector 'app-sample' is invalid for standalone components.

B The component is missing the imports array in @Component decorator.

C The template syntax is incorrect and causes a parsing error.

D Standalone components cannot be declared in NgModules, so declaring SampleComponent in declarations causes an error.

💡 Hint

Standalone components are self-contained and should not be declared in NgModules.

Standalone components are designed to be used without NgModules. Declaring them in an NgModule's declarations array causes a compile-time error.

🧠 Conceptual

advanced

What happens when you export a standalone component from an NgModule?

Given a standalone component and an NgModule that exports it, what is the effect?

A Standalone components cannot be exported from NgModules; this causes a compile error.

B The standalone component can be used in other modules that import this NgModule.

C Exporting a standalone component from an NgModule duplicates the component and causes runtime errors.

D The component becomes non-standalone and requires declarations in every module.

💡 Hint

Think about how exports in NgModules share components with other modules.

Exporting a standalone component from an NgModule allows other modules that import this NgModule to use that component without declaring it themselves.

❓ state_output

expert

What is the value of 'message' after this Angular signal update sequence?

Given this Angular component code using signals, what is the final value of the 'message' signal after running the update calls?

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-msg',
  standalone: true,
  template: `{{ message() }}`
})
export class MsgComponent {
  message = signal('start');

  constructor() {
    this.message.update(msg => msg + '->first');
    this.message.set('reset');
    this.message.update(msg => msg + '->second');
  }
}

A "reset->second"

B "start->first->second"

C "start->first"

D "reset"

💡 Hint

Remember that set replaces the signal value, update modifies the current value.

The signal starts as 'start'. The first update appends '->first' making it 'start->first'. Then set replaces the value with 'reset'. The last update appends '->second' to 'reset', resulting in 'reset->second'.

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