// header.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  standalone: true,
  template: `<header><h1>My Site</h1></header>`,
})
export class HeaderComponent {}

// sidebar.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  standalone: true,
  template: `<nav><a>Home</a><a>About</a></nav>`,
})
export class SidebarComponent {}

// footer.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-footer',
  standalone: true,
  template: `<footer><p>&copy; 2026</p></footer>`,
})
export class FooterComponent {}

// app.component.ts
import { Component } from '@angular/core';
import { HeaderComponent } from './header/header.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HeaderComponent, SidebarComponent, FooterComponent],
  template: `
    <app-header></app-header>
    <app-sidebar></app-sidebar>
    <main><p>Main content goes here.</p></main>
    <app-footer></app-footer>
  `,
})
export class AppComponent {}

/*
  Notes:
  - All three child components are listed in AppComponent's imports
    array — without that, their selector tags would not be recognized
    in AppComponent's template.
  - Each component owns its own small piece of markup; AppComponent's
    template arranges them together to form the overall page layout.
*/