Standalone component declaration in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this standalone Angular 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)="count.set(count() + 1)">Clicked {{ count() }} times</button>`
})
export class CounterComponent {
  count = signal(0);
}

A No button is rendered because standalone components need to be declared in a module.

B A button showing 'Clicked undefined times' and does not update on click.

C A button showing 'Clicked NaN times' and does not update on click.

D A button showing 'Clicked 0 times' initially, increments count on each click.

💡 Hint

Standalone components can be used without modules and signals hold reactive state.

The component uses Angular's signal to hold a count starting at 0. The template shows a button with the current count. Clicking the button increases the count by 1, updating the displayed text.

Standalone components do not require declaration in a module, so option D is incorrect.

📝 Syntax

intermediate

Which option correctly declares a standalone Angular component?

Select the code snippet that correctly declares a standalone Angular component with a selector 'app-hello' and a template displaying 'Hello World'.

A

import { Component } from '@angular/core';
@Component({
  selector: 'app-hello',
  standalone: false,
  template: `<p>Hello World</p>`
})
export class HelloComponent {}

B

import { Component } from '@angular/core';
@Component({
  selector: 'app-hello',
  template: `<p>Hello World</p>`
})
export class HelloComponent {}

C

import { Component } from '@angular/core';
@Component({
  selector: 'app-hello',
  standalone: true,
  template: `<p>Hello World</p>`
})
export class HelloComponent {}

D

import { Component } from '@angular/core';
@Component({
  selector: 'app-hello',
  standalone: true
})
export class HelloComponent {
  template = `<p>Hello World</p>`;
}

💡 Hint

Standalone components require the 'standalone: true' property inside the @Component decorator and the template inside the decorator.

Option C correctly sets standalone: true and includes the template inside the decorator.

Option C misses standalone: true, so it's not standalone.

Option C sets standalone: false, so it's not standalone.

Option C incorrectly places the template as a class property instead of inside the decorator.

🔧 Debug

advanced

Why does this standalone component fail to render?

Given this standalone component code, why does Angular fail to render it?

Angular

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

@Component({
  selector: 'app-greet',
  standalone: true,
  template: `<h1>{{ greeting }}</h1>`
})
export class GreetComponent {
  greeting: string;

  constructor() {
    // Intentionally left blank
  }
}

A The component renders an empty <h1> because 'greeting' is undefined, but no error occurs.

B Standalone components must use signals for reactive properties, so 'greeting' must be a signal.

C The component lacks the 'imports' array in the decorator, causing a runtime error.

D The 'greeting' property is not initialized, so it is undefined and Angular throws an error.

💡 Hint

Uninitialized class properties in Angular templates show as empty but do not cause errors.

The 'greeting' property is declared but not initialized, so its value is undefined. Angular renders it as empty text inside the <h1> tag.

No error occurs because Angular tolerates undefined values in interpolation.

Standalone components do not require signals; signals are optional for reactivity.

The 'imports' array is optional unless external modules or components are used.

❓ lifecycle

advanced

How to inject a service in a standalone component?

Which code snippet correctly injects a service named 'UserService' into a standalone Angular component using the new Angular 17+ inject() function?

A

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<p>User loaded</p>`
})
export class UserComponent {
  static userService = inject(UserService);
}

B

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<p>User loaded</p>`
})
export class UserComponent {
  userService = inject(UserService);
}

C

import { Component, inject } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<p>User loaded</p>`
})
export class UserComponent {
  userService = new UserService();
}

D

import { Component } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-user',
  standalone: true,
  template: `<p>User loaded</p>`
})
export class UserComponent {
  constructor(private userService: UserService) {}
}

💡 Hint

Use the inject() function inside the class body to get the service instance.

Option B correctly uses Angular 17+ inject() function to get the service instance as a class property.

Option B uses constructor injection which is valid but not the new inject() function.

Option B manually creates a new service instance, bypassing Angular's DI system.

Option B uses a static property which is not recommended and may cause errors.

🧠 Conceptual

expert

What is a key advantage of standalone components in Angular 17+?

Choose the most accurate statement about standalone components introduced in Angular 17+.

A They eliminate the need for NgModules, simplifying component reuse and reducing boilerplate.

B They disable dependency injection to improve startup time.

C They force all components to use signals for state management, making legacy code incompatible.

D They require all components to be declared in a single global module for better performance.

💡 Hint

Standalone components reduce the complexity of Angular apps by removing module declarations.

Standalone components allow developers to create Angular components without declaring them in NgModules, which simplifies app structure and improves reusability.

Option A is false because standalone components reduce the need for global modules.

Option A is false because signals are optional, not mandatory.

Option A is false because dependency injection remains fully supported.

Practice

1. What does adding standalone: true in an Angular component's decorator do?

easy

A. Disables change detection for the component.

B. Makes the component lazy-loaded automatically.

C. Registers the component globally in the Angular app.

D. Declares the component as standalone, removing the need for NgModule declaration.

Solution

1. Step 1: Understand Angular component declaration

   Normally, Angular components must be declared inside an NgModule to be usable.

2. Step 2: Effect of standalone: true

   Setting standalone: true allows the component to be used without declaring it in any NgModule.

3. Final Answer:

   Declares the component as standalone, removing the need for NgModule declaration. -> Option D

4. Quick Check:

   Standalone component = no NgModule needed [OK]

Hint: Standalone means no NgModule needed for the component [OK]

Common Mistakes:

• Thinking standalone makes component lazy-loaded
• Assuming standalone registers component globally
• Confusing standalone with change detection settings

2. Which of the following is the correct syntax to declare a standalone component in Angular?

easy

A. @Component({ selector: 'app-test', standalone: true, template: 'Test' }) export class TestComponent {}

B. @Component({ selector: 'app-test', standalone: false, template: 'Test' }) export class TestComponent {}

C. @Component({ selector: 'app-test', standalone: true, templateUrl: 'test.html' }) export class TestComponent {} NgModule({ declarations: [TestComponent] })

D. @Component({ selector: 'app-test', standalone: true }) export class TestComponent { template: 'Test' }

Solution

1. Step 1: Check the standalone property usage

   The standalone property must be set to true inside the @Component decorator.

2. Step 2: Verify template declaration and class export

   The template can be inline with template or external with templateUrl. The class must be exported properly.

3. Final Answer:

   @Component({ selector: 'app-test', standalone: true, template: '<p>Test</p>' }) export class TestComponent {} -> Option A

4. Quick Check:

   Standalone true inside @Component with inline template [OK]

Hint: Standalone true must be inside @Component decorator [OK]

Common Mistakes:

• Setting standalone to false
• Declaring template outside the decorator
• Mixing NgModule declaration with standalone component

3. Given this standalone component declaration, what will be the rendered output?

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

@Component({
  selector: 'app-hello',
  standalone: true,
  template: `
Hello, {{ name }}!
`
})
export class HelloComponent {
  name = 'Angular';
}

medium

A. No output because component is standalone

B. Hello, {{ name }}!

C. Hello, Angular!

D. Error: Property 'name' is undefined

Solution

1. Step 1: Understand template interpolation

   The template uses {{ name }} which Angular replaces with the component's property value.

2. Step 2: Check the property value

   The component defines name = 'Angular', so interpolation outputs 'Angular'.

3. Final Answer:

   <h1>Hello, Angular!</h1> -> Option C

4. Quick Check:

   Template interpolation replaces {{ name }} with 'Angular' [OK]

Hint: Interpolation shows property value inside template [OK]

Common Mistakes:

• Thinking interpolation shows raw {{ name }}
• Assuming standalone disables property binding
• Expecting runtime error for missing property

4. Identify the error in this standalone component declaration:

@Component({
  selector: 'app-sample',
  standalone: true,
  template: '
Sample
',
  imports: [CommonModule]
})
export class SampleComponent {}

medium

A. The imports array must be inside @NgModule, not @Component

B. Missing import statement for CommonModule

C. CommonModule must be imported from '@angular/common' and declared in imports

D. CommonModule cannot be imported in standalone components

Solution

1. Step 1: Check imports usage in standalone component

   Standalone components can import modules like CommonModule via the imports array in the decorator.

2. Step 2: Verify import statement presence

   The code uses CommonModule in imports but does not import it from '@angular/common' at the top.

3. Final Answer:

   Missing import statement for CommonModule -> Option B

4. Quick Check:

   Imports array needs proper import statements [OK]

Hint: Always import modules before using in imports array [OK]

Common Mistakes:

• Thinking imports array is invalid in @Component
• Forgetting to import CommonModule from '@angular/common'
• Assuming CommonModule cannot be used in standalone components

5. You want to create a standalone Angular component that uses another standalone component called ButtonComponent. How should you declare the imports array in your component decorator?

hard

A. @Component({ standalone: true, imports: [ButtonComponent], template: '' })

B. @Component({ standalone: true, imports: ['ButtonComponent'], template: '' })

C. @Component({ standalone: true, imports: [NgModule], template: '' })

D. @Component({ standalone: true, template: '' })

Solution

1. Step 1: Understand how to use other standalone components

   Standalone components can import other standalone components by listing them in the imports array.

2. Step 2: Correct syntax for imports array

   The imports array must contain the component class itself, not a string or NgModule.

3. Final Answer:

   @Component({ standalone: true, imports: [ButtonComponent], template: '<app-button></app-button>' }) -> Option A

4. Quick Check:

   Imports array includes component classes, not strings [OK]

Hint: Import component classes directly, not strings or modules [OK]

Common Mistakes:

• Using string names instead of component classes in imports
• Importing NgModule instead of component
• Omitting imports array when using other standalone components