Why should you care?

Enterprise SPAs have dozens of screens; components keep each piece testable and reusable.

See it live — copy this example

Paste into your MeanVerse project (Angular + Express + MongoDB), then run with ng serve / node / mongosh as noted.

@Component({
  selector: 'mv-account-card',
  standalone: true,
  imports: [CurrencyPipe],
  template: `
    <article class="card">
      <h3>{{ account().name }}</h3>
      <p>{{ account().balance | currency }}</p>
    </article>`
})
export class AccountCardComponent {
  account = input.required<Account>();
}

What happened?

• standalone: true means no NgModule wrapper.
• input.required binds parent data.
• CurrencyPipe formats balance in the template.

Practice next

1. ng generate component shared/account-card --standalone
2. Define an Account interface in models/account.ts
3. Pass mock account data from a parent template
4. Add an output() event when user clicks Transfer.
5. Style the card differently for negative balances.

Remember

Components render UI and receive inputs. Standalone is the modern default. Keep components focused on display and user events.

Banking dashboard widgets

MeanVerse shows savings, checking, and loan cards on one page.

Outcome: Each card is a component fed by one AccountService stream.