Container and presentational components in Angular - Mini Project: Build & Apply

Container and Presentational Components in Angular

📖 Scenario: You are building a simple Angular app that shows a list of books. You want to separate the logic that manages the data from the part that shows the books on the screen. This helps keep your code clean and easy to change later.

🎯 Goal: Create two Angular standalone components: a container component that holds the list of books and a presentational component that displays each book's title and author.

📋 What You'll Learn

Create a container component named BookListContainer that holds the book data.

Create a presentational component named BookListPresentational that receives the book list as an input and displays it.

Use Angular's @Input() decorator to pass data from the container to the presentational component.

Use Angular's *ngFor directive in the presentational component to show each book.

Both components must be standalone and use Angular 17+ features.

💡 Why This Matters

🌍 Real World

Separating container and presentational components helps keep Angular apps organized and easier to maintain, especially as they grow larger.

💼 Career

Understanding this pattern is important for Angular developers to write clean, reusable, and testable code in professional projects.

1

Create the BookListContainer component with book data

Create a standalone Angular component named BookListContainer. Inside it, define a public property called books that is an array of objects. Each object should have title and author properties with these exact values: { title: 'The Hobbit', author: 'J.R.R. Tolkien' }, { title: '1984', author: 'George Orwell' }, { title: 'Pride and Prejudice', author: 'Jane Austen' }.

Angular

// Create BookListContainer component with books array
// Your code here

Hint

Use @Component with standalone: true. Define the books array inside the class.

2

Create the BookListPresentational component with input property

Create a standalone Angular component named BookListPresentational. Add an @Input() property called books that accepts an array of book objects. The component's template should be empty for now.

Angular

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

// Create BookListPresentational component with @Input() books property
// Your code here

Hint

Import @Input from @angular/core. Use it to decorate the books property.

3

Display the list of books in BookListPresentational

In the BookListPresentational component template, use *ngFor to loop over the books input. For each book, display the title inside a <h3> tag and the author inside a <p> tag.

Angular

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

@Component({
  selector: 'app-book-list-presentational',
  standalone: true,
  template: `
    
    
  `,
})
export class BookListPresentational {
  @Input() books: { title: string; author: string }[] = [];
}

// BookListContainer component code remains unchanged
// Your code here

Hint

Use *ngFor="let book of books" inside a container element. Use interpolation {{ }} to show title and author.

4

Connect BookListContainer to BookListPresentational in template

In the BookListContainer component template, add the <app-book-list-presentational> tag. Pass the books array to it using property binding with [books]="books". Also, import BookListPresentational in the imports array of the @Component decorator of BookListContainer.

Angular

import { Component } from '@angular/core';
import { BookListPresentational } from './book-list-presentational.component';

@Component({
  selector: 'app-book-list-container',
  standalone: true,
  imports: [BookListPresentational],
  template: `
    
    
  `,
})
export class BookListContainer {
  books = [
    { title: 'The Hobbit', author: 'J.R.R. Tolkien' },
    { title: '1984', author: 'George Orwell' },
    { title: 'Pride and Prejudice', author: 'Jane Austen' }
  ];
}

Hint

Import the presentational component and add it to the imports array. Use its selector tag in the template with property binding.

Practice

1. In Angular, what is the main role of a container component?

easy

A. To manage CSS and animations

B. To display UI elements and styles

C. To define routes and navigation

D. To handle data fetching and business logic

Solution

1. Step 1: Understand container component responsibility

   Container components are designed to manage data and logic, such as fetching data or handling user actions.

2. Step 2: Differentiate from presentational components

   Presentational components focus on showing data and UI, not on data handling.

3. Final Answer:

   To handle data fetching and business logic -> Option D

4. Quick Check:

   Container = data and logic [OK]

Hint: Container = data and logic, Presentational = UI only [OK]

Common Mistakes:

• Confusing container with presentational component roles
• Thinking container manages styles or routes
• Assuming container handles only UI display

2. Which of the following is the correct way to pass data from a container to a presentational component in Angular?

easy

A. Use ngModel in container component only

B. @Input() data: any; in presentational, bind in container template

C. @Output() data: any; in presentational, bind in container template

D. Directly modify presentational component's variables from container

Solution

1. Step 1: Identify Angular data flow syntax

   Data flows from container to presentational via @Input() properties.

2. Step 2: Understand binding in container template

   The container passes data by binding to the presentational component's input property in its template.

3. Final Answer:

   @Input() data: any; in presentational, bind in container template -> Option B

4. Quick Check:

   Data down via @Input() [OK]

Hint: Use @Input() to pass data down from container [OK]

Common Mistakes:

• Using @Output() to pass data down instead of events up
• Trying to modify child variables directly
• Confusing ngModel with input binding

3. Given this Angular container component template:

<app-user-list [users]="userArray" (selectUser)="onUserSelect($event)"></app-user-list>

What is the role of (selectUser) here?

medium

A. It defines a CSS class for styling

B. It binds data from container to presentational component

C. It listens to an event emitted by the presentational component

D. It initializes the component's state

Solution

1. Step 1: Recognize Angular event binding syntax

   Parentheses around selectUser indicate event binding from child to parent.

2. Step 2: Understand event emission from presentational component

   The presentational component emits selectUser event, container listens and runs onUserSelect.

3. Final Answer:

   It listens to an event emitted by the presentational component -> Option C

4. Quick Check:

   Parent listens to child event with (event) [OK]

Hint: Parent uses (event) to listen to child events [OK]

Common Mistakes:

• Thinking (selectUser) passes data down
• Confusing event binding with property binding
• Assuming it styles or initializes state

4. What is wrong with this presentational component code snippet?

@Component({
  selector: 'app-item',
  template: `<div>{{item.name}}</div>`
})
export class ItemComponent {
  item: any;
}

medium

A. Missing @Input() decorator on item property

B. Template syntax is incorrect

C. Selector name is invalid

D. Component class should be abstract

Solution

1. Step 1: Check data input declaration

   The presentational component expects data from parent, so item must be decorated with @Input() to receive it.

2. Step 2: Verify template and selector

   Template syntax and selector are valid; no abstract class needed.

3. Final Answer:

   Missing @Input() decorator on item property -> Option A

4. Quick Check:

   @Input() needed to receive data [OK]

Hint: Add @Input() to receive data in presentational component [OK]

Common Mistakes:

• Forgetting @Input() on input properties
• Thinking template interpolation is wrong
• Assuming selector must be different

5. You want to create a container component that fetches a list of products and passes it to a presentational component for display. Which approach best follows Angular container and presentational component patterns?

hard

A. Container fetches products, stores in a variable, passes via @Input(); presentational only displays list

B. Presentational component fetches products and emits events to container

C. Container and presentational both fetch products independently

D. Presentational component manages fetching and state internally

Solution

1. Step 1: Identify container responsibility

   The container should handle fetching data and managing state.

2. Step 2: Identify presentational responsibility

   The presentational component should only display data received via @Input() without fetching or managing state.

3. Final Answer:

   Container fetches products, stores in a variable, passes via @Input(); presentational only displays list -> Option A

4. Quick Check:

   Container = data fetch, Presentational = display [OK]

Hint: Container fetches data, presentational displays it [OK]

Common Mistakes:

• Letting presentational fetch data
• Duplicating data fetch in both components
• Mixing data logic inside presentational