Component Basics in Angular

// Standalone component (default in Angular 17+)
// Generate: ng generate component user-card --standalone
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-user-card',
  standalone: true,
  imports: [CommonModule],     // Import dependencies directly
  template: \`
    <div class="card">
      <h2>{{ name }}</h2>
      <p>{{ email }}</p>
    </div>
  \`,
  styles: [\`.card { padding: 1rem; }\`],
})
export class UserCardComponent {
  name = 'Alice';
  email = 'alice@example.com';
}

// Bootstrap a standalone app
// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent);