// generated with: ng generate component footer

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

@Component({
  selector: 'app-footer',
  standalone: true,
  templateUrl: './footer.component.html',
})
export class FooterComponent {}

// footer.component.html
<p>Built while learning Angular.</p>

// app.component.ts — importing and using the new component
import { Component } from '@angular/core';
import { FooterComponent } from './footer/footer.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [FooterComponent],
  templateUrl: './app.component.html',
})
export class AppComponent {}

// app.component.html
<h1>My App</h1>
<app-footer></app-footer>

/*
  Notes:
  - A standalone component must be explicitly listed in another
    component's `imports` array before its selector tag can be used
    in that component's template — there's no automatic global
    registration the way a plain function component in React is just
    imported and used directly.
  - <app-footer></app-footer> uses FooterComponent's selector exactly
    like any other HTML tag inside AppComponent's template.
*/