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

Need a 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

Need a 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

Need a 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' }
  ];
}

Need a hint?

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