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.