Container and presentational components in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

Identify the role of the container component

In Angular, a container component is responsible for managing data and logic, while a presentational component focuses on displaying UI. Given the following scenario, which behavior best describes a container component?

Angular

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

@Component({
  selector: 'app-user-container',
  standalone: true,
  template: `<app-user-profile [user]="user()"></app-user-profile>`,
  imports: [UserProfileComponent]
})
export class UserContainerComponent {
  user = signal({ name: 'Alice', age: 30 });
}

A Only displays static user information without any data logic

B Handles UI styling and layout without managing data

C Manages user data and passes it down to the presentational component

D Directly modifies the DOM elements for user display

💡 Hint

Think about which component holds the data and which one just shows it.

The container component manages the data and passes it as inputs to presentational components, which focus on UI rendering.

❓ state_output

intermediate

What is the output of the presentational component?

Given a presentational component that receives a user object as input and displays the user's name, what will be rendered?

Angular

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

@Component({
  selector: 'app-user-profile',
  standalone: true,
  template: `<p>User: {{ user.name }}</p>`
})
export class UserProfileComponent {
  @Input() user!: { name: string; age: number };
}

// Usage in container template:
// <app-user-profile [user]="{ name: 'Bob', age: 25 }"></app-user-profile>

A <p>User: undefined</p>

B <p>User: { name: 'Bob', age: 25 }</p>

C No output due to missing user input

D <p>User: Bob</p>

💡 Hint

Look at how the template accesses the user property.

The template uses interpolation to show the user's name property, so it will display 'User: Bob'.

❓ lifecycle

advanced

When does the container component update the presentational component?

In Angular standalone components using signals, when does the presentational component update its display after the container component changes the data?

Angular

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

@Component({
  selector: 'app-container',
  standalone: true,
  template: `<app-display [data]="data()"></app-display>`,
  imports: [DisplayComponent]
})
export class ContainerComponent {
  data = signal('initial');

  updateData() {
    this.data.set('updated');
  }
}

A Immediately after the signal changes, Angular re-renders the presentational component

B Only after a manual change detection is triggered

C When the user clicks a button inside the presentational component

D After the container component is destroyed and recreated

💡 Hint

Signals automatically notify Angular when their value changes.

Signals in Angular trigger automatic updates to any bindings that depend on them, so the presentational component updates immediately.

📝 Syntax

advanced

Which option correctly defines a presentational component?

Choose the correct Angular standalone presentational component that accepts an input and displays it.

A

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

@Component({
  selector: 'app-display',
  standalone: true,
  template: `<p>{{ text }}</p>`
})
export class DisplayComponent {
  @Input() text!: string;
}

B

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

@Component({
  selector: 'app-display',
  template: `<p>{{ text }}</p>`
})
export class DisplayComponent {
  text: string = '';
}

C

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

@Component({
  selector: 'app-display',
  standalone: true,
  template: `<p>{{ text }}</p>`
})
export class DisplayComponent {
  text: string = '';
}

D

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

@Component({
  selector: 'app-display',
  standalone: true,
  template: `<p>{{ text }}</p>`
})
export class DisplayComponent {
  @Input text: string;
}

💡 Hint

Check the syntax for declaring inputs and standalone components.

Option A correctly uses @Input() decorator with parentheses and marks the component as standalone.

🔧 Debug

expert

Why does the presentational component not update when container data changes?

Given this container and presentational component setup, why does the UI not update when the container changes the data?

Angular

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

@Component({
  selector: 'app-container',
  standalone: true,
  template: `<app-display [data]="data"></app-display>`,
  imports: [DisplayComponent]
})
export class ContainerComponent {
  data = signal('hello');

  changeData() {
    this.data.set('world');
  }
}

@Component({
  selector: 'app-display',
  standalone: true,
  template: `<p>{{ data }}</p>`
})
export class DisplayComponent {
  @Input() data!: string;
}

A The presentational component template uses incorrect interpolation syntax

B The container passes the signal itself instead of its value, so the presentational component does not detect changes

C The container component does not call changeData() to update the signal

D The presentational component is missing the @Input decorator

💡 Hint

Check what is passed as input and what the presentational component expects.

The container passes the signal object instead of its current value, so the presentational component receives a signal object, not a string, and does not update when the signal changes.