Ask Out Your Valentine Workshop (Angular Edition)

Tech Lead: Daniel Henricks 2/10/2026

Angular Features Covered

This project demonstrates several modern Angular features:

1. Standalone Components

• The application is built using a Standalone Component (standalone: true).
• This removes the need for NgModule, making the application structure simpler and more lightweight.
• We import necessary dependencies (like CommonModule) directly into the component.

2. Angular Signals

• We use Signals for state management, which is the modern standard for reactivity in Angular.
• signal(): Used to create reactive state variables (e.g., noClickCount, yesButtonHeight).
• Signal Updates: We update state using methods like .update() (e.g., increasing the "No" click count) and .set() (e.g., changing the final state).
• Template Reading: We read signal values in the template by calling them as functions (e.g., yesButtonHeight()).

3. Template Syntax & Data Binding

• Interpolation ({{ }}): Displaying dynamic text like the question or button labels.
• Property Binding ([]):
  • Binding to image sources ([src]) and alt text ([alt]).
  • Binding to CSS classes ([class.hidden]) to conditionally show or hide elements.
• Style Binding: Dynamically changing styles based on state (e.g., [style.height.px] and [style.fontSize.px] to make the "Yes" button grow).
• Event Binding (()): Handling user interactions like clicks ((click)="handleYesClick()").

4. Getters for "Computed" Logic

• The component uses TypeScript getters (e.g., get currentImageSrc()) to derive values based on the current state of the signals.
• This keeps the template clean by moving logic into the TypeScript class.

Project Structure

• src/app/app.ts: The main logic, state management (Signals), and event handlers.
• src/app/app.html: The structure and layout, utilizing Angular's template syntax.
• src/app/app.css: Global styles and Tailwind utility classes (if configured).

Getting Started

1. Install Dependencies: npm install @angular/cli && npm install
2. Run the App: ng serve