Container and presentational components in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a container component in Angular?

A container component manages data and logic. It fetches data, handles user actions, and passes data to presentational components. It does not focus on how things look.

beginner

What is a presentational component in Angular?

A presentational component focuses on how things look. It receives data via inputs and emits events via outputs. It does not manage data fetching or business logic.

intermediate

Why separate container and presentational components?

Separating them makes code easier to read and maintain. Containers handle logic, presentational components handle UI. This separation helps reuse UI parts and test logic separately.

intermediate

How do container components communicate with presentational components in Angular?

Container components pass data to presentational components using @Input properties. Presentational components send events back using @Output EventEmitters.

beginner

Give an example of a presentational component's role.

A presentational component might display a list of items with buttons. It shows the items it receives and emits an event when a button is clicked, without knowing where data comes from.

What is the main responsibility of a container component?

A Manage data and business logic

B Display UI and styles

C Only emit events

D Handle CSS styling

Container components handle data fetching and business logic, not just UI or styling.

How does a presentational component receive data?

A By fetching from a service

B Via @Input properties

C Using @Output EventEmitters

D Directly from the DOM

Presentational components get data through @Input properties passed from container components.

Which component should handle user interaction logic?

A Both equally

B Presentational component

C Container component

D Neither

Container components handle user interaction logic and pass data/events to presentational components.

What does a presentational component emit to notify events?

A @Input property

B Direct DOM event

C Service call

D @Output EventEmitter

Presentational components use @Output EventEmitter to send events back to container components.

Why is separating container and presentational components helpful?

A Improves code clarity and reuse

B Makes CSS easier

C Reduces file size

D Avoids using Angular modules

Separation improves code clarity, maintainability, and allows reusing UI components easily.

Explain the difference between container and presentational components in Angular.

Think about who handles data and who handles display.

Describe how container and presentational components work together in an Angular app.

Consider the flow of data and events between components.