Nesting Components

Nesting Components

Real Angular applications are trees of nested components. A parent component contains child components, which can contain their own children — creating a component hierarchy.

The Component Tree

AppComponent (root)
├── HeaderComponent
│   ├── LogoComponent
│   └── NavComponent
├── MainComponent
│   ├── SidebarComponent
│   └── ContentComponent
│       ├── ArticleComponent
│       └── CommentsComponent
└── FooterComponent

Creating the Components

# Generate all components:
ng g c header
ng g c footer
ng g c home

Parent Template (AppComponent)

<!-- app.component.html -->
<div class="app-container">
    <app-header></app-header>
    <main class="content">
        <app-home></app-home>
    </main>
    <app-footer></app-footer>
</div>

Header Component

// header.component.ts
@Component({
    selector: 'app-header',
    template: `
        <header class="main-header">
            <h1>{{ title }}</h1>
            <nav>
                <a href="#">Home</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
            </nav>
        </header>
    `,
    styles: [`
        .main-header {
            background: #2c3e50;
            color: white;
            padding: 16px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        nav a {
            color: #bbb;
            text-decoration: none;
            margin-left: 20px;
        }
        nav a:hover { color: white; }
    `]
})
export class HeaderComponent {
    title = 'My Angular App';
}

Home Component (with nested children)

// First generate a child component:
// ng g c home/featured-card

// home.component.html
<section class="home">
    <h2>Welcome!</h2>
    <div class="cards">
        <app-featured-card></app-featured-card>
        <app-featured-card></app-featured-card>
        <app-featured-card></app-featured-card>
    </div>
</section>

Footer Component

// footer.component.ts
@Component({
    selector: 'app-footer',
    template: `
        <footer>
            <p>&copy; {{ year }} {{ appName }}. All rights reserved.</p>
        </footer>
    `,
    styles: [`
        footer {
            background: #34495e;
            color: #bbb;
            text-align: center;
            padding: 20px;
            font-size: 14px;
        }
    `]
})
export class FooterComponent {
    year = new Date().getFullYear();
    appName = 'My Angular App';
}

How Nesting Works

1. The parent template uses the child's selector as an HTML tag
2. Angular finds the matching component and renders its template in place
3. Each component has its own scoped styles, properties, and methods
4. Components are independent and reusable

Data Flow in Nested Components

Parent → Child:   @Input() properties  (covered in episode #14)
Child → Parent:   @Output() events     (covered in episode #15)

Key Takeaways

• Angular apps are trees of nested components
• Use child selectors (<app-child>) inside parent templates
• Each component is self-contained with its own template, styles, and logic
• Break the UI into small, reusable components
• Data flows down via @Input and up via @Output (covered later)