Angular Mini Projects: Visual Interview Demos

Five focused Angular 17 mini-projects to visually demonstrate core concepts. Each includes a hands-on tutorial with runnable code snippets and Tailwind-powered UI.

Projects

• hooks-visualizer — data binding types in action
• lifecycle-visualizer — lifecycle hooks timeline
• httpclient-visualizer — HTTP GET/POST/PUT/DELETE with flow UI
• observable-vs-promise — async behavior side-by-side
• forms-comparison — template vs reactive forms with live state

Quick Start (per project)

1. Ensure Node 18+ and Angular CLI 17+: npm i -g @angular/cli
2. Create app: ng new <project-name> --standalone --routing=false --style=css
3. Install Tailwind (optional but recommended in guides)
4. Replace/add files as shown in each tutorial
5. Run: npm start (or ng serve)

Documentation

See the docs/ folder for detailed step-by-step tutorials and code for each project.