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'.