Container and presentational components in Angular - Step-by-Step Execution

Concept Flow - Container and presentational components

Start

↓

Container Component

↓

Pass data as inputs

↓

Presentational Component

↓

Emit events to container

↓

Container updates state

↩Back to Pass data as inputs

The container component manages data and logic, then passes data to the presentational component, which shows the UI and sends user events back to the container.

Execution Sample

Angular

/* Container Component */
import { Component } from '@angular/core';
import { EventEmitter, Input, Output } from '@angular/core';

@Component({selector: 'app-container', standalone: true})
export class ContainerComponent {
  data = ['Apple', 'Banana'];
  addItem(item: string) { this.data = [...this.data, item]; }
}

/* Presentational Component */
@Component({selector: 'app-present', standalone: true, inputs: ['items'], outputs: ['add']})
export class PresentationalComponent {
  @Input() items: string[] = [];
  @Output() add = new EventEmitter<string>();
}

Container holds the list and logic; presentational shows the list and emits new items to add.

Execution Table

Step	Component	Action	Data State	Event Emitted	Result
1	Container	Initialize data = ['Apple', 'Banana']	['Apple', 'Banana']	None	Data ready for presentational
2	Container -> Presentational	Pass data as input	['Apple', 'Banana']	None	Presentational displays list
3	User	Clicks add button with 'Cherry'	['Apple', 'Banana']	add('Cherry')	Event emitted to container
4	Presentational	Emit add event	['Apple', 'Banana']	add('Cherry')	Container receives event
5	Container	Add 'Cherry' to data	['Apple', 'Banana', 'Cherry']	None	Data updated, triggers re-render
6	Container -> Presentational	Pass updated data	['Apple', 'Banana', 'Cherry']	None	Presentational updates UI
7	End	No more actions	['Apple', 'Banana', 'Cherry']	None	UI shows updated list

💡 User stops adding items; data and UI are synchronized.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
data	['Apple', 'Banana']	['Apple', 'Banana']	['Apple', 'Banana', 'Cherry']	['Apple', 'Banana', 'Cherry']
items (input)	[]	['Apple', 'Banana']	['Apple', 'Banana', 'Cherry']	['Apple', 'Banana', 'Cherry']
add event	None	add('Cherry')	None	None

Key Moments - 3 Insights

Why does the container component hold the data instead of the presentational component?

The container manages data and logic to keep presentational components simple and focused on UI, as shown in steps 1 and 5 where container updates data and passes it down.

How does the presentational component communicate user actions back to the container?

It emits events like 'add' (step 4), which the container listens to and uses to update data (step 5), keeping separation of concerns clear.

Why does the presentational component receive data as inputs instead of managing its own state?

Receiving data as inputs (step 2 and 6) allows the presentational component to be reusable and stateless, focusing only on displaying data.

Visual Quiz - 3 Questions

Look at the execution table at step 5. What is the state of the 'data' variable after adding 'Cherry'?

A ['Apple', 'Banana', 'Cherry']

B ['Apple', 'Banana']

C ['Cherry']

D []

💡 Hint

Check the 'Data State' column in step 5 of the execution table.

At which step does the presentational component emit an event to the container?

A Step 2

B Step 5

C Step 4

D Step 6

💡 Hint

Look for 'Emit add event' in the 'Action' column of the execution table.

If the container did not update the data after receiving the add event, what would the presentational component display at step 6?

A ['Apple', 'Banana', 'Cherry']

B ['Apple', 'Banana']

C []

D ['Cherry']

💡 Hint

Refer to the 'data' variable values in the variable tracker after step 5.

Concept Snapshot

Container components hold data and logic.
Presentational components receive data as inputs and emit events.
Container passes data down and listens to events.
This separation keeps UI simple and logic centralized.
Use @Input() for data and @Output() for events in Angular.

Full Transcript

Container and presentational components separate concerns in Angular. The container component manages data and logic, such as fetching or updating a list. It passes this data to the presentational component using inputs. The presentational component focuses on showing the UI and emits events when the user interacts, like adding an item. The container listens to these events and updates the data accordingly. This cycle repeats, keeping UI and logic cleanly separated for easier maintenance and reuse.