Learning Objectives

  • Install and verify Angular tooling (Node.js, npm/pnpm, Angular CLI, IDE extensions).
  • Understand generated Angular project structure and build workflow.
  • Create standalone components and templates with bindings, inputs, outputs, and lifecycle hooks.
  • Establish a component library sandbox using Storybook or a dedicated playground route.

Required Reading & Viewing

Hands-On Checklist

  1. Install Node.js LTS 20.x and Angular CLI; run ng new component-sandbox --standalone.
  2. Explore project files: angular.json, main.ts, app.routes.ts, feature folders.
  3. Create reusable components (button, card, modal) with inputs/outputs, content projection, and basic styling.
  4. Configure Storybook (npx storybook@latest init) or add a dedicated sandbox route to render components in isolation.
  5. Implement unit tests for one component using Jest or Karma to confirm bindings work.

Deliverable: Component Library Sandbox Skeleton

  • At least three reusable components documented via Storybook stories.
  • Sandbox route or Storybook environment demonstrating variants.
  • README explaining component API and usage guidelines.

Suggested Daily Breakdown

  • Day 1: Tooling setup, project scaffolding, repository hygiene.
  • Day 2: Deep dive into project anatomy, build/test commands, environment configs.
  • Day 3: Build ButtonComponent (props, events), add Storybook story.
  • Day 4: Build CardComponent with content projection and layout variants.
  • Day 5: Build ModalComponent, manage visibility state via outputs.
  • Day 6: Write unit tests for one component; add ESLint/Prettier config.
  • Day 7: Polish documentation, record a short demo walkthrough.

Reflection & Extension

  • Document component API decisions and styling guidelines.
  • Evaluate friction points in setup; create scripts or templates to streamline future components.
  • Stretch goal: Integrate Tailwind or a design system to standardize styles.