Goal: {{ goal() }}º

+ @for (product of products; track $index) { +

Shopping cart

+ @for (product of cart; track $index) { +

+ @if (isEven()) { Even } @else { Odd } +

Welcome to Angular's Signal Tutorial!

diff --git a/adev/src/content/tutorials/signals/intro/src/app/app.ts b/adev/src/content/tutorials/signals/intro/src/app/app.ts new file mode 100644 index 000000000000..3f97af669a18 --- /dev/null +++ b/adev/src/content/tutorials/signals/intro/src/app/app.ts @@ -0,0 +1,20 @@ +import {Component, signal, computed} from '@angular/core'; + +@Component({ + selector: 'app-root', + templateUrl: './app.html', + styleUrl: './app.css', +}) +export class App { + count = signal(0); + + isEven = computed(() => this.count() % 2 === 0); + + increment() { + this.count.set(this.count() + 1); + } + + decrement() { + this.count.set(this.count() - 1); + } +} diff --git a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md new file mode 100644 index 000000000000..1d6265257039 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/README.md @@ -0,0 +1,133 @@ +# Creating and updating your first signal + +Welcome to the Angular signals tutorial! [Signals](/essentials/signals) are Angular's reactive primitive that provide a way to manage state and automatically update your UI when that state changes. + +In this activity, you'll learn how to: + +- Create your first signal using the `signal()` function +- Display its value in a template +- Update the signal value using `set()` and `update()` methods + +

+ +Let's build an interactive user status system with signals. + + + + +Import the `signal` function from `@angular/core` at the top of your component file. + +```ts +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; +``` + + + + +Add a `userStatus` signal to your component class that is initialized with a value of `'offline'`. + +```ts +@Component({ + /* Config omitted */ +}) +export class App { + userStatus = signal<'online' | 'offline'>('offline'); +} +``` + + + + +Update the template to display the current user status by calling the signal `userStatus()` with parentheses. + +```html +

User Dashboard

+``` + + + + +Add methods to your component that change the user status using the `set()` method. + +```ts +goOnline() { + this.userStatus.set('online'); +} + +goOffline() { + this.userStatus.set('offline'); +} +``` + +The `set()` method replaces the signal's value entirely with a new value. + + + + +Add control buttons to the template for changing the user's status. + +```html +

User Dashboard

+``` + + + + +Add a `toggleStatus()` method that switches between online and offline using the `update()` method. + +```ts +toggleStatus() { + this.userStatus.update(current => current === 'online' ? 'offline' : 'online'); +} +``` + +The `update()` method takes a function that receives the current value and returns the new value. This is useful when you need to modify the existing value based on its current state. + + + + +Add the toggle button to your status controls. + +```html +

+``` + + + + + +Congratulations! You've created your first signal and learned how to update it using both `set()` and `update()` methods. The `signal()` function creates a reactive value that Angular tracks, and when you update it, your UI automatically reflects the changes. + +Next, you'll learn [how to derive state from signals using computed](/tutorials/signals/2-deriving-state-with-computed-signals)! + + + +You might notice `ChangeDetectionStrategy.OnPush` in the component decorator throughout this tutorial. This is a performance optimization for Angular components that use signals. For now, you can safely ignore it—just know it helps your app run faster when using signals! You can learn more in the [change detection strategies API docs](/api/core/ChangeDetectionStrategy). + + diff --git a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.css new file mode 100644 index 000000000000..13f074dd9ee2 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.css @@ -0,0 +1,47 @@ +.user-profile { + padding: 20px; + font-family: Arial, sans-serif; +} + +.status-indicator { + display: flex; + align-items: center; + gap: 8px; + padding: 12px; + margin-bottom: 12px; + border-radius: 8px; + font-weight: 500; +} + +.status-dot { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.online { + background-color: #e8f5e8; + color: #2e7d32; +} + +.online .status-dot { + background-color: #4caf50; +} + +.offline { + background-color: #ffebee; + color: #c62828; +} + +.offline .status-dot { + background-color: #f44336; +} + +.away { + background-color: #fff3e0; + color: #ef6c00; +} + +.away .status-dot { + background-color: #ff9800; +} diff --git a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.ts new file mode 100644 index 000000000000..02d126714661 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.ts @@ -0,0 +1,43 @@ +import {Component, signal, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

User Dashboard

User Dashboard

+ + Status: ??? +

+ +Let's enhance our user status system by adding computed values that derive information from our user status signal. + + + + +Add `computed` to your existing imports. + +```ts +// Add computed to existing imports +import {Component, signal, computed} from '@angular/core'; +``` + + + + +Add a computed signal that determines if notifications should be enabled based on user status. + +```ts +notificationsEnabled = computed(() => this.userStatus() === 'online'); +``` + +This computed signal will automatically recalculate whenever the `userStatus` signal changes. Notice how we call `this.userStatus()` inside the computed function to read the signal's value. + + + +Add a computed signal that creates a descriptive message based on the user status. + +```ts +statusMessage = computed(() => { + const status = this.userStatus(); + switch (status) { + case 'online': return 'Available for meetings and messages'; + case 'away': return 'Temporarily away, will respond soon'; + case 'offline': return 'Not available, check back later'; + default: return 'Status unknown'; + } +}); +``` + +This shows how computed signals can handle more complex logic with switch statements and string transformations. + + + +Add a computed signal that calculates if the user is within their working hours. + +```ts +isWithinWorkingHours = computed(() => { + const now = new Date(); + const hour = now.getHours(); + const isWeekday = now.getDay() > 0 && now.getDay() < 6; + return isWeekday && hour >= 9 && hour < 17 && this.userStatus() !== 'offline'; +}); +``` + +This demonstrates how computed signals can perform calculations and combine multiple data sources. The value updates automatically when the `userStatus` changes. + + + +Update your template to use the computed signals. + +```html + +

+ Notifications: + @if (notificationsEnabled()) { + Enabled + } @else { + Disabled + } +

+ Within Working Hours: + @if (isWithinWorkingHours()) { + Yes + } @else { + No + } +

+ + +``` + + + + + +Excellent! You've now learned how to create computed signals. + +Here are some key points to remember: + +- **Computed signals are reactive**: They automatically update when their dependencies change +- **They're read-only**: You can't directly set computed values, they're derived from other signals +- **They can contain complex logic**: Use them for calculations, transformations, and derived state +- **They provide a way to make performant computations based on dynamic state**: Angular only recalculates them when their dependencies actually change + +In the next lesson, you'll learn about [a different way to derive state with linkedSignals](/tutorials/signals/3-deriving-state-with-linked-signals)! diff --git a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/answer/src/app/app.css new file mode 100644 index 000000000000..80ca9fc39a6e --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/answer/src/app/app.css @@ -0,0 +1,80 @@ +.user-profile { + max-width: 600px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.status-indicator { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 16px; + border-radius: 8px; + margin: 20px 0; + font-weight: bold; + text-transform: capitalize; +} + +.status-dot { + width: 12px; + height: 12px; + border-radius: 50%; + display: inline-block; +} + +.status-indicator.online .status-dot { + background: #4caf50; +} + +.status-indicator.away .status-dot { + background: #ff9800; +} + +.status-indicator.offline .status-dot { + background: #f44336; +} + +.status-info { + margin: 20px 0; + padding: 16px; + background: #f8f9fa; + border-radius: 8px; + border-left: 4px solid; + border-left-color: var(--status-color); +} + +.notifications, .message, .working-hours { + margin: 8px 0; +} + +.status-controls { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + transition: background-color 0.2s; +} + +button:not(:disabled) { + background-color: #007bff; + color: white; +} + +button:disabled { + background-color: #6c757d; + color: #fff; + cursor: not-allowed; + opacity: 0.6; +} + +.status-controls .toggle-btn { + background-color: #28a745; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/answer/src/app/app.ts new file mode 100644 index 000000000000..03f340815af5 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/answer/src/app/app.ts @@ -0,0 +1,106 @@ +import {Component, signal, computed, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

User Dashboard

+ Notifications: + @if (notificationsEnabled()) { + Enabled + } @else { + Disabled + } +

+ Within Working Hours: + @if (isWithinWorkingHours()) { + Yes + } @else { + No + } +

User Dashboard

+ Notifications: Loading... +

+ Message: Loading... +

+ Within Working Hours: Loading... +

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + userStatus = signal<'online' | 'away' | 'offline'>('offline'); + + // TODO: Create notificationsEnabled computed signal that returns true when status is 'online' + + // TODO: Create statusMessage computed signal that returns appropriate message for each status + + // TODO: Create isWithinWorkingHours computed signal that calculates if user is within working hours + + goOnline() { + this.userStatus.set('online'); + } + + goAway() { + this.userStatus.set('away'); + } + + goOffline() { + this.userStatus.set('offline'); + } + + toggleStatus() { + const current = this.userStatus(); + switch (current) { + case 'offline': + this.userStatus.set('online'); + break; + case 'online': + this.userStatus.set('away'); + break; + case 'away': + this.userStatus.set('offline'); + break; + } + } +} diff --git a/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md new file mode 100644 index 000000000000..a0922d2b1c1e --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md @@ -0,0 +1,97 @@ +# Deriving state with linked signals + +In the [previous lesson](/tutorials/signals/2-deriving-state-with-computed-signals), you created a computed signal for `notificationsEnabled` that automatically followed your user status. But what if users want to manually disable notifications even when they're online? That's where linked signals come in. + +Linked signals are writable signals that maintain a reactive connection to their source signals. They're perfect for creating state that normally follows a computation but can be overridden when needed. + +In this activity, you'll learn how `linkedSignal()` differs from `computed()` by converting your notifications example. + +

+ +Let's enhance our user status system by converting the read-only computed `notificationsEnabled` to a writable linked signal. + + + + +Add `linkedSignal` to your existing imports. + +```ts +// Add linkedSignal to existing imports +import {Component, signal, computed, linkedSignal} from '@angular/core'; +``` + + + + +Replace the computed `notificationsEnabled` with a linkedSignal using the exact same expression: + +```ts +// Previously (from lesson 2): +// notificationsEnabled = computed(() => this.userStatus() === 'online'); + +// Now with linkedSignal - same expression, but writable: +notificationsEnabled = linkedSignal(() => this.userStatus() === 'online'); +``` + +The expression is identical, but linkedSignal creates a writable signal. It will still automatically update when `userStatus` changes, but you can also set it manually. + + + +Add a method to demonstrate that linked signals can be written to directly: + +```ts +toggleNotifications() { + // This works with linkedSignal but would error with computed! + this.notificationsEnabled.set(!this.notificationsEnabled()); +} +``` + +This is the key difference: computed signals are read-only, but linked signals can be updated manually while still maintaining their reactive connection. + + + +Update your template to add a toggle button for notifications: + +```html +

+ Notifications: + @if (notificationsEnabled()) { + Enabled + } @else { + Disabled + } + +

+``` + + + + +Now test the behavior: + +1. Change the user status - notice how `notificationsEnabled` updates automatically +2. Manually toggle notifications - it overrides the computed value +3. Change status again - the linked signal re-syncs with its computation + +This demonstrates that linked signals maintain their reactive connection even after being manually set! + + + + +Excellent! You've learned the key differences between computed and linked signals: + +- **Computed signals**: Read-only, always derived from other signals +- **Linked signals**: Writable, can be both derived AND manually updated +- **Use computed when**: The value should always be calculated +- **Use linkedSignal when**: You need a default computation that can be overridden + +In the next lesson, you'll learn [how to manage async data with signals](/tutorials/signals/4-managing-async-data-with-signals)! \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/answer/src/app/app.css new file mode 100644 index 000000000000..af614fae588c --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/answer/src/app/app.css @@ -0,0 +1,98 @@ +.user-profile { + max-width: 600px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.status-indicator { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 16px; + border-radius: 8px; + margin: 20px 0; + font-weight: bold; + text-transform: capitalize; +} + +.status-dot { + width: 12px; + height: 12px; + border-radius: 50%; + display: inline-block; +} + +.status-info { + margin: 20px 0; + padding: 16px; + background: #f8f9fa; + border-radius: 8px; + border-left: 4px solid; + border-left-color: var(--status-color); +} + +.availability, .message { + margin: 8px 0; +} + +.preferences { + margin: 20px 0; + padding: 16px; + background: #f0f8ff; + border-radius: 8px; + border-left: 4px solid #007bff; +} + +.preference-item { + margin: 12px 0; +} + +.preference-item label { + display: flex; + align-items: center; + gap: 8px; + cursor: pointer; +} + +.preference-item input[type="checkbox"] { + margin: 0; +} + +.info { + font-size: 0.9em; + color: #6c757d; + font-style: italic; + margin-top: 16px; +} + +.status-controls { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + transition: background-color 0.2s; +} + +button:not(:disabled) { + background-color: #007bff; + color: white; +} + +button:disabled { + background-color: #6c757d; + color: #fff; + cursor: not-allowed; + opacity: 0.6; +} + +.status-controls .toggle-btn { + background-color: #28a745; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/answer/src/app/app.ts new file mode 100644 index 000000000000..b5b33802fafe --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/answer/src/app/app.ts @@ -0,0 +1,119 @@ +import {Component, signal, computed, linkedSignal, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'app-root', + template: ` +

User Dashboard

+ Notifications: + @if (notificationsEnabled()) { + Enabled + } @else { + Disabled + } + +

+ Within Working Hours: + @if (isWithinWorkingHours()) { + Yes + } @else { + No + } +

User Dashboard

+ Notifications: Loading... + +

+ Within Working Hours: + @if (isWithinWorkingHours()) { + Yes + } @else { + No + } +

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + userStatus = signal<'online' | 'offline' | 'away'>('offline'); + + // Currently using computed - read-only + notificationsEnabled = computed(() => this.userStatus() === 'online'); + + // TODO: Replace notificationsEnabled with linkedSignal using the same expression: + // notificationsEnabled = linkedSignal(() => this.userStatus() === 'online'); + + statusMessage = computed(() => { + const status = this.userStatus(); + switch (status) { + case 'online': + return 'Available for meetings and messages'; + case 'away': + return 'Temporarily away, will respond soon'; + case 'offline': + return 'Not available, check back later'; + default: + return 'Status unknown'; + } + }); + + isWithinWorkingHours = computed(() => { + const now = new Date(); + const hour = now.getHours(); + const isWeekday = now.getDay() > 0 && now.getDay() < 6; + return isWeekday && hour >= 9 && hour < 17 && this.userStatus() !== 'offline'; + }); + + // TODO: Add toggleNotifications method to manually set notificationsEnabled + + toggleNotifications() { + // TODO: Implement to toggle notificationsEnabled using set() + } + + goOnline() { + this.userStatus.set('online'); + } + + goAway() { + this.userStatus.set('away'); + } + + goOffline() { + this.userStatus.set('offline'); + } + + toggleStatus() { + this.userStatus.update((current: 'online' | 'offline' | 'away') => { + switch (current) { + case 'offline': + return 'online'; + case 'online': + return 'away'; + case 'away': + return 'offline'; + default: + return 'offline'; + } + }); + } +} diff --git a/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md new file mode 100644 index 000000000000..e3a748d9d7fe --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/README.md @@ -0,0 +1,106 @@ +# Managing async data with signals using the Resources API + +Now that you've learned [how to derive state with linked signals](/tutorials/signals/3-deriving-state-with-linked-signals), let's explore how to handle asynchronous data with the Resource API. The Resource API provides a powerful way to manage async operations using signals, with built-in loading states, error handling, and request management. + +In this activity, you'll learn how to use the `resource()` function to load data asynchronously and how to handle different states of async operations. + +

+ +Let's build a user profile loader that demonstrates the Resource API in action. + + + + +Add `resource` to your existing imports and import the fake API function. + +```ts +// Add resource to existing imports +import {Component, signal, computed, resource} from '@angular/core'; +// Import mock API function +import {loadUser} from './user-api'; +``` + + + + +Add a property in the component class that creates a resource to load user data based on a user ID signal. + +```ts +userId = signal(1); + +userResource = resource({ + params: () => ({ id: this.userId() }), + loader: (params) => loadUser(params.params.id) +}); +``` + + + + +Add methods to change the user ID and reload the resource. + +```ts +loadUser(id: number) { + this.userId.set(id); +} + +reloadUser() { + this.userResource.reload(); +} +``` + +Changing the params signal automatically triggers a reload, or you can manually reload with `reload()`. + + + +Add computed signals to access different states of the resource. + +```ts +isLoading = computed(() => this.userResource.status() === 'loading'); +hasError = computed(() => this.userResource.status() === 'error'); +``` + +Resources provide a `status()` signal that can be 'loading', 'success', or 'error', a `value()` signal for the loaded data, and a `hasValue()` method that safely checks if data is available. + + + +Add the template to show different resource states and control buttons. + +```html +

User Profile Loader

+ } @else if (hasError()) { +

+ @if (isLoading()) { +

Loading user...

Error: {{ userResource.error()?.message }}

+ } @else if (userResource.hasValue()) { +

+``` + + + + + +Excellent! You've now learned how to use the Resource API with signals. Key concepts to remember: + +- **Resources are reactive**: They automatically reload when params change +- **Built-in state management**: Resources provide `status()`, `value()`, and `error()` signals +- **Automatic cleanup**: Resources handle request cancellation and cleanup automatically +- **Manual control**: You can manually reload or abort requests when needed + +In the next lesson, you'll learn [how to use signals for communication between components](/tutorials/signals/5-component-communication-with-signals)! diff --git a/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/answer/src/app/app.css new file mode 100644 index 000000000000..128f473934be --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/answer/src/app/app.css @@ -0,0 +1,36 @@ +:host { + color: #333; + font-family: Arial, sans-serif; + display: block; + padding: 20px; +} + +button { + margin: 0 5px 10px 0; + padding: 8px 16px; + font-size: 16px; + cursor: pointer; +} + +.status { + margin-top: 20px; + padding: 20px; + border: 1px solid #ddd; + border-radius: 4px; +} + +.error { + color: #d32f2f; +} + +.user-info { + color: #2e7d32; +} + +.user-info h3 { + margin: 0 0 10px 0; +} + +.user-info p { + margin: 0; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/answer/src/app/app.ts new file mode 100644 index 000000000000..c0c22be08609 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/answer/src/app/app.ts @@ -0,0 +1,52 @@ +import {Component, signal, computed, resource, ChangeDetectionStrategy} from '@angular/core'; +import {loadUser} from './user-api'; + +@Component({ + selector: 'app-root', + template: ` +

User Profile Loader

+ } @else if (hasError()) { +

+ @if (isLoading()) { +

Loading user...

Error: {{ userResource.error()?.message }}

+ } @else if (userResource.hasValue()) { +

User Profile Loader

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + // TODO: Create a signal for userId + // TODO: Create a resource for user data + // TODO: Create computed signals for resource states + // TODO: Add loadUser method + // TODO: Add reloadUser method +} diff --git a/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/src/app/user-api.ts b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/src/app/user-api.ts new file mode 100644 index 000000000000..fcd2c3e5a992 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/src/app/user-api.ts @@ -0,0 +1,15 @@ +// Mock API function for loading user data +export async function loadUser(id: number): Promise<{name: string; email: string}> { + // Simulate network delay + await new Promise((resolve) => setTimeout(resolve, 1000)); + + // Simulate potential errors + if (id === 999) { + throw new Error('User not found'); + } + + return { + name: `User ${id}`, + email: `user${id}@example.com`, + }; +} diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md new file mode 100644 index 000000000000..9153641e75b9 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md @@ -0,0 +1,192 @@ +# Component communication with signals + +Now that you've learned [managing async data with signals](/tutorials/signals/4-managing-async-data-with-signals), let's explore Angular's signal-based APIs for component inputs, outputs, and two-way binding, making component data flow more reactive and efficient. + +In this activity, you'll add signal communication to pre-built components to see the three main patterns in action. + +

Click a button to load user data

+ + + + +Add signal `input` and `output` to receive and send data in the `product-card` component. + +```ts +// Add imports for signal based communication between components +import {Component, input, output} from '@angular/core'; + +// Add these signal inputs +name = input.required(); +price = input.required(); +available = input(true); + +// Add signal output +addProductToCart = output(); +``` + + + + +Update the template in `product-card` to display the signal values and handle clicks. + +```html +

\${{ price() }}

Status: {{ available() ? 'Available' : 'Out of Stock' }}

+``` + + + + +Implement the method that emits data from the child to the parent and updates the app to display the last added product. + +```ts +// product-card.ts +addToCart() { + if (this.available()) { + this.addProductToCart.emit(this.name()); + } +} +``` + +```html + +

Last product added to cart: {{ lastAdded() || 'None yet' }}

+``` + + + + +Chase the static values on the `product-card` component in `app.ts` to use dynamic values from the parent's signals. + +```html + + + + + + +``` + + + + +Add a method to handle the the `addProductToCart` output from `product-card` in `app.ts`. + +```ts +onProductClicked(productName: string) { + this.lastAdded.set(`${productName}`); +} +``` + + + + +Next, we need to setup two-way binding with a signal model in `quantity-selector.ts` file to receive and update the parent's signal model. + +```ts +// Add imports +import {Component, input, model} from '@angular/core'; + +// Signal model input which receives parent's model +quantity = model.required(); + +// Signal inputs for constraints +min = input(1); +max = input(10); +``` + +This creates a model input that will receive the parent's signal model. + + + +Update the `quantity-selector.ts` component to use the model and add increment/decrement methods. + +```html +

+ Quantity: + + {{ quantity() }} + +

+``` + +```ts +// Methods that modify the parent's model +increment() { + if (this.quantity() < this.max()) { + this.quantity.set(this.quantity() + 1); + } +} + +decrement() { + if (this.quantity() > this.min()) { + this.quantity.set(this.quantity() - 1); + } +} +``` + +Notice: When the child calls `this.quantity.set()`, it's actually modifying the parent's model! + + + +Create a signal model and connect it to the `quantity-selector` component in `app.ts`. + +```ts +// Add signal model +selectedQuantity = model(1); + +// Add methods to test two-way binding +resetQuantity() { + this.selectedQuantity.set(1); +} + +increaseQuantity() { + this.selectedQuantity.set(this.selectedQuantity() + 1); +} +``` + +Then update the template to show the two-way binding in action: + +```html +// With the actual component and controls: + + + +

Selected quantity: {{ selectedQuantity() }}

+``` + + + + + +Perfect! You've implemented the three core signal communication patterns: + +- **Signal inputs** - Parent data flows down to child components reactively +- **Signal outputs** - Child events flow up to parent components with type safety +- **Signal models** - Two-way binding keeps parent and child synchronized automatically + +In the next lesson, you'll learn about [using signals with services](/tutorials/signals/6-using-signals-with-services)! diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/app.css new file mode 100644 index 000000000000..be2a232e570c --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/app.css @@ -0,0 +1,99 @@ +/* ProductCard Component Styles */ +.product-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px; + margin: 8px; + background: #f9f9f9; +} + +.price { + font-size: 1.2em; + font-weight: bold; + color: #2e7d32; +} + +.description { + color: #666; + margin: 8px 0; +} + +.product-card button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; +} + +.product-card button:disabled { + background: #ccc; + cursor: not-allowed; +} + +/* QuantitySelector Component Styles */ +.quantity-selector { + display: flex; + align-items: center; + gap: 8px; + margin: 8px 0; +} + +.quantity { + min-width: 30px; + text-align: center; + font-weight: bold; +} + +.quantity-selector button { + width: 32px; + height: 32px; + border: 1px solid #ddd; + border-radius: 4px; + background: white; + cursor: pointer; +} + +.quantity-selector button:disabled { + background: #f5f5f5; + cursor: not-allowed; +} + +/* App Component Styles */ +.shopping-app { + max-width: 800px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 16px; + margin: 20px 0; +} + +.cart-section { + border-top: 1px solid #ddd; + padding-top: 20px; + margin-top: 20px; +} + +.cart-info { + margin: 16px 0; + padding: 16px; + background: #f0f8ff; + border-radius: 4px; +} + +.shopping-app button { + margin-right: 8px; + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/app.ts new file mode 100644 index 000000000000..9d05258df552 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/app.ts @@ -0,0 +1,96 @@ +import {Component, signal, model, ChangeDetectionStrategy} from '@angular/core'; +import {ProductCard} from './product-card'; +import {QuantitySelector} from './quantity-selector'; + +@Component({ + selector: 'app-root', + imports: [ProductCard, QuantitySelector], + template: ` +

Component Communication with Signals

Signal Inputs (Parent → Child)

Data flows down from parent to child via signal inputs:

Signal Models (Parent ↔ Child)

Two-way binding allows parent and child to share state:

Selected quantity: {{ selectedQuantity() }}

Try this:

Click +/- buttons above (child changes parent)
Click "Increase from Parent" (parent changes child)
Both automatically sync! That's the power of signal models.

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + // Signal inputs data + productName = signal('Demo Product'); + productPrice = signal(99); + productAvailable = signal(true); + + // Signal model for two-way binding + selectedQuantity = model(1); + + // Signal for tracking events + lastAdded = signal(null); + + updateProduct() { + this.productName.set(`Product ${Math.floor(Math.random() * 100)}`); + this.productPrice.set(Math.floor(Math.random() * 500) + 50); + } + + toggleAvailability() { + this.productAvailable.set(!this.productAvailable()); + } + + resetQuantity() { + this.selectedQuantity.set(1); + } + + increaseQuantity() { + this.selectedQuantity.set(this.selectedQuantity() + 1); + } + + onProductClicked(productName: string) { + this.lastAdded.set(`${productName}`); + } +} diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/product-card.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/product-card.ts new file mode 100644 index 000000000000..6eb902d40c2d --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/product-card.ts @@ -0,0 +1,33 @@ +import {Component, input, output, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'product-card', + template: ` +

Signal Outputs (Child → Parent)

Last product added to cart: {{ lastAdded() || 'None yet' }}

\${{ price() }}

Status: {{ available() ? 'Available' : 'Out of Stock' }}

+ `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ProductCard { + // Signal inputs - receive data from parent + name = input.required(); + price = input.required(); + available = input(true); + + // Signal output - send events to parent + addProductToCart = output(); + + addToCart() { + if (this.available()) { + this.addProductToCart.emit(this.name()); + } + } +} diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/quantity-selector.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/quantity-selector.ts new file mode 100644 index 000000000000..760508f5e12d --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/quantity-selector.ts @@ -0,0 +1,34 @@ +import {Component, input, model, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'quantity-selector', + template: ` +

+ Quantity: + + {{ quantity() }} + +

Component Communication with Signals

Signal Inputs (Parent → Child)

Data flows down from parent to child via signal inputs:

Signal Models (Parent ↔ Child)

Two-way binding allows parent and child to share state:

Selected quantity: 1

After implementing signal models:

Click +/- buttons (child changes parent)
Click "Increase from Parent" (parent changes child)
Watch both sync automatically!

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + productName = signal('Demo Product'); + productPrice = signal(99); + productAvailable = signal(true); + lastAdded = signal(null); + + // TODO: Create signal model for selectedQuantity + // TODO: Create signal for lastAdded tracking + + updateProduct() { + this.productName.set(`Product ${Math.floor(Math.random() * 100)}`); + this.productPrice.set(Math.floor(Math.random() * 500) + 50); + } + + toggleAvailability() { + this.productAvailable.set(!this.productAvailable()); + } + + resetQuantity() { + // TODO: Reset selectedQuantity to 1 + console.log('TODO: Reset quantity'); + } + + increaseQuantity() { + // TODO: Increase selectedQuantity by 1 + console.log('TODO: Increase quantity'); + } + + // TODO: Add onProductClicked method to handle child events +} diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/product-card.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/product-card.ts new file mode 100644 index 000000000000..ff2e8903fa9c --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/product-card.ts @@ -0,0 +1,21 @@ +import {Component, ChangeDetectionStrategy} from '@angular/core'; + +// TODO: Import input and output from @angular/core + +@Component({ + selector: 'product-card', + template: ` +

Signal Outputs (Child → Parent)

Last product clicked on: None yet

Product Name

Status: Available

+ `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ProductCard { + // TODO: Create signal inputs for name, price, and available + // TODO: Create signal output for clicked events + // TODO: Implement addToCart method +} diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/quantity-selector.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/quantity-selector.ts new file mode 100644 index 000000000000..2727ffecadd7 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/quantity-selector.ts @@ -0,0 +1,23 @@ +import {Component, ChangeDetectionStrategy} from '@angular/core'; + +// TODO: Import input and model from @angular/core + +@Component({ + selector: 'quantity-selector', + template: ` +

+ Quantity: + + 1 + +

+ `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class QuantitySelector { + // TODO: Create signal model INPUT for quantity (not creating a new model!) + // Use model.required() to receive parent's model + // TODO: Create signal inputs for min and max constraints + // TODO: Add increment method that updates the model + // TODO: Add decrement method that updates the model +} diff --git a/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/README.md b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/README.md new file mode 100644 index 000000000000..3e82a3f075e7 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/README.md @@ -0,0 +1,173 @@ +# Using signals with services + +Now that you've learned [component communication with signals](/tutorials/signals/5-component-communication-with-signals), let's explore how to use signals with Angular services. Services are perfect for sharing reactive state across multiple components, and signals make this even more powerful by providing automatic change detection and clean reactive patterns. + +In this activity, you'll learn how to create a cart store that uses signals to manage shopping cart state and share it across components. + +

+ +Let's build a simple shopping cart store that manages cart state with signals, allowing the cart display component to react to cart changes automatically. + + + + +Add readonly and computed signals to make the cart state reactive in `cart-store.ts`. + +```ts +// Readonly signals +readonly cartItems = this.items.asReadonly(); + +// Computed signals +readonly totalQuantity = computed(() => { + return this.items().reduce((sum, item) => sum + item.quantity, 0); +}); + +readonly totalPrice = computed(() => { + return this.items().reduce((sum, item) => sum + item.price * item.quantity, 0); +}); +``` + +These signals allow components to reactively access cart data and computed totals. + + + +Update the cart display component in `cart-display.ts` to use the cart store signals. + +```ts +import {Component, inject} from '@angular/core'; +import {CartStore} from './cart-store'; + +@Component({ + selector: 'cart-display', + template: ` +

Shopping Cart Demo

Add Products

+ + @if (cartStore.cartItems().length === 0) { +

Cart Contents

Your cart is empty

+ } @else { +

+ @for (item of cartStore.cartItems(); track item.id) { +

\${{ item.price }} each

+ + {{ item.quantity }} + + +

Total Items: {{ cartStore.totalQuantity() }}

Total: \${{ cartStore.totalPrice() }}

+ `, +}) +export class CartDisplay { + cartStore = inject(CartStore); + + addLaptop() { + this.cartStore.addItem('1', 'Laptop', 999); + } + + addMouse() { + this.cartStore.addItem('2', 'Mouse', 25); + } + + addKeyboard() { + this.cartStore.addItem('3', 'Keyboard', 79); + } + + increaseQuantity(id: string) { + const items = this.cartStore.cartItems(); + const currentItem = items.find((item) => item.id === id); + if (currentItem) { + this.cartStore.updateQuantity(id, currentItem.quantity + 1); + } + } + + decreaseQuantity(id: string) { + const items = this.cartStore.cartItems(); + const currentItem = items.find((item) => item.id === id); + if (currentItem && currentItem.quantity > 1) { + this.cartStore.updateQuantity(id, currentItem.quantity - 1); + } + } + + removeItem(id: string) { + this.cartStore.removeItem(id); + } + + clearCart() { + this.cartStore.clearCart(); + } +} +``` + +This component includes buttons to add products and displays cart contents using service signals. + + + +Update the main app component in `app.ts` to use the cart service and display the cart component. + +```ts +import {Component, inject} from '@angular/core'; +import {CartStore} from './cart-store'; +import {CartDisplay} from './cart-display'; + +@Component({ + selector: 'app-root', + imports: [CartDisplay], + template: ` +

Signals with Services Demo

+ Cart: {{ cartStore.totalQuantity() }} items (\${{ cartStore.totalPrice() }}) +

+ `, + styleUrls: ['./app.css'], +}) +export class App { + cartStore = inject(CartStore); +} +``` + +This component demonstrates how services with signals provide automatic reactivity in the header cart badge. + + + + +Excellent! You've now learned how to use signals with services. Key concepts to remember: + +- **Service-level signals**: Services can use signals to manage reactive state +- **Dependency injection**: Use `inject()` to access services with signals in components +- **Computed signals in services**: Create derived state that updates automatically +- **Readonly signals**: Expose read-only versions of signals to prevent external mutations + +In the next lesson, you'll learn about [how to use signals with directives](/tutorials/signals/7-using-signals-with-directives)! diff --git a/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/app.css new file mode 100644 index 000000000000..64831ac631c7 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/app.css @@ -0,0 +1,157 @@ +/* ProductList Component Styles */ +.product-list { + margin: 20px 0; +} + +.product-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px; + margin-bottom: 16px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.product-info h3 { + margin: 0 0 8px 0; +} + +.price { + font-size: 1.2em; + font-weight: bold; + color: #2e7d32; + margin: 4px 0; +} + +.description { + color: #666; + margin: 4px 0; +} + +.category { + color: #888; + font-size: 0.9em; + margin: 4px 0; +} + +.actions { + display: flex; + gap: 8px; +} + +.product-list button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; +} + +.product-list button.favorited { + background: #d32f2f; +} + +/* CartDisplay Component Styles */ +.cart-display { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px; + margin: 20px 0; +} + +.empty-message { + text-align: center; + color: #888; + font-style: italic; +} + +.cart-item { + display: flex; + justify-content: space-between; + align-items: center; + padding: 12px 0; + border-bottom: 1px solid #eee; +} + +.item-info h4 { + margin: 0 0 4px 0; +} + +.cart-display .price { + color: #666; + margin: 0; +} + +.quantity-controls { + display: flex; + align-items: center; + gap: 8px; +} + +.quantity { + min-width: 20px; + text-align: center; +} + +.cart-summary { + border-top: 1px solid #ddd; + padding-top: 16px; + margin-top: 16px; +} + +.total-price { + font-size: 1.2em; + font-weight: bold; + color: #2e7d32; +} + +.cart-display button { + padding: 4px 8px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; +} + +.cart-display button.remove { + background: #d32f2f; +} + +.cart-display button.clear-btn { + background: #f57c00; + padding: 8px 16px; +} + +/* App Component Styles */ +.shopping-app { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +header { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 1px solid #ddd; + padding-bottom: 16px; + margin-bottom: 20px; +} + +.cart-badge { + background: #1976d2; + color: white; + padding: 8px 16px; + border-radius: 20px; + font-weight: bold; +} + +main { + display: grid; + grid-template-columns: 2fr 1fr; + gap: 20px; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/app.ts new file mode 100644 index 000000000000..e48b2d647254 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/app.ts @@ -0,0 +1,27 @@ +import {Component, inject, ChangeDetectionStrategy} from '@angular/core'; +import {CartStore} from './cart-store'; +import {CartDisplay} from './cart-display'; + +@Component({ + selector: 'app-root', + imports: [CartDisplay], + template: ` +

Signals with Services Demo

+ Cart: {{ cartStore.totalQuantity() }} items (\${{ cartStore.totalPrice() }}) +

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + cartStore = inject(CartStore); +} diff --git a/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/cart-display.ts b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/cart-display.ts new file mode 100644 index 000000000000..460a74abefd2 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/answer/src/app/cart-display.ts @@ -0,0 +1,89 @@ +import {Component, inject, ChangeDetectionStrategy} from '@angular/core'; +import {CartStore} from './cart-store'; +import {CartItem} from './cart-types'; + +@Component({ + selector: 'cart-display', + template: ` +

Shopping Cart Demo

Add Products

+ @if (cartStore.cartItems().length === 0) { +

Cart Contents

Your cart is empty

+ } @else { +

+ @for (item of cartStore.cartItems(); track item.id) { +

\${{ item.price }} each

+ + {{ item.quantity }} + + +

Total Items: {{ cartStore.totalQuantity() }}

Total: \${{ cartStore.totalPrice() }}

+ Cart: Loading... items ($Loading...) +

Signals with Services Demo

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + // TODO: Inject CartStore using inject(CartStore) +} diff --git a/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/src/app/cart-display.ts b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/src/app/cart-display.ts new file mode 100644 index 000000000000..44f0a1b3147b --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/src/app/cart-display.ts @@ -0,0 +1,81 @@ +import {Component, inject, ChangeDetectionStrategy} from '@angular/core'; +import {CartStore} from './cart-store'; + +@Component({ + selector: 'cart-display', + template: ` +

Shopping Cart Demo

Add Products

+ @for (item of []; track item.id) { +

Cart Contents

+ + @if (false) { +

Your cart is empty

+ } @else { +

\${{ item.price }} each

+ + {{ item.quantity }} + + +

Total: $0

+ +Let's build a simple highlight directive that demonstrates the core signals concepts in directives. + + + + +First, add the signal imports to the directive. + +```ts +import {Directive, input, signal, computed} from '@angular/core'; +``` + +Directives can use all the same signal APIs as components. + + + +Add signal inputs to configure the directive behavior. + +```ts +// Signal inputs for configuration +color = input('yellow'); +intensity = input(0.3); +``` + +Signal inputs allow parent elements to pass reactive data to the directive. + + + +Create an internal signal to track the hover state. + +```ts +// Internal signal for hover state +private isHovered = signal(false); +``` + +This signal will track whether the user is hovering over the element. + + + +Add a computed signal that calculates the background style. + +```ts +// Computed signal for background style +backgroundStyle = computed(() => { + const baseColor = this.color(); + const alpha = this.isHovered() ? this.intensity() : this.intensity() * 0.5; + + const colorMap: Record = { + 'yellow': `rgba(255, 255, 0, ${alpha})`, + 'blue': `rgba(0, 100, 255, ${alpha})`, + 'green': `rgba(0, 200, 0, ${alpha})`, + 'red': `rgba(255, 0, 0, ${alpha})`, + }; + + return colorMap[baseColor] || colorMap['yellow']; +}); +``` + +This computed signal reactively calculates the background color based on inputs and hover state. + + + +Use the `host` object to bind the computed signal and handle events. + +```ts +@Directive({ + selector: '[highlight]', + host: { + '[style.backgroundColor]': 'backgroundStyle()', + '(mouseenter)': 'onMouseEnter()', + '(mouseleave)': 'onMouseLeave()', + }, +}) +``` + +This approach is more declarative and follows Angular v20+ best practices. + + + +Add the methods that update the hover signal. + +```ts +onMouseEnter() { + this.isHovered.set(true); +} + +onMouseLeave() { + this.isHovered.set(false); +} +``` + +These methods update the signal, which automatically triggers the computed signal to recalculate. + + + +Update the app template to demonstrate the directive. + +```ts +template: ` +

Directive with Signals

+`, +``` + +The directive automatically applies reactive highlighting based on the signal inputs. + + + + +Excellent! You've learned how to use signals in directives. Key concepts to remember: + +- **Signal inputs** - Reactive configuration from parent elements +- **Internal signals** - Managing directive state +- **Computed signals** - Reactive calculations based on multiple signals +- **Host object bindings** - A declarative approach to connect signals to DOM properties and events +- **Reactive event handling** - Updating signals in response to user interactions + +Signals make directives more predictable and easier to debug by providing clear reactive data flow. diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/app.css new file mode 100644 index 000000000000..f1ce96b20ef2 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/app.css @@ -0,0 +1,82 @@ +.highlight-demo { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.demo-section { + margin-bottom: 40px; + padding: 20px; + border: 1px solid #e5e7eb; + border-radius: 8px; +} + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + margin: 20px 0; +} + +.product-card { + padding: 20px; + border: 1px solid #e5e7eb; + border-radius: 8px; + cursor: pointer; +} + +.price { + font-size: 1.2em; + font-weight: bold; + color: #059669; + margin: 8px 0; +} + +.intensity { + font-size: 0.9em; + color: #6b7280; + font-style: italic; +} + +.text-examples { + margin: 20px 0; +} + +.text-examples p { + padding: 12px; + margin: 16px 0; + border-radius: 4px; +} + +.text-examples button { + padding: 12px 24px; + border: 1px solid #d1d5db; + border-radius: 6px; + background: white; + cursor: pointer; + font-size: 16px; + margin: 16px 8px; +} + +.info-box { + padding: 20px; + border: 1px solid #d1d5db; + border-radius: 8px; + margin: 16px 0; +} + +.info-box h4 { + margin-top: 0; + color: #374151; +} + +h1, h2, h3 { + color: #111827; + margin-top: 0; +} + +p { + color: #6b7280; + line-height: 1.5; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/app.ts new file mode 100644 index 000000000000..33c458c848d3 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/app.ts @@ -0,0 +1,27 @@ +import {Component, ChangeDetectionStrategy} from '@angular/core'; +import {HighlightDirective} from './highlight-directive'; + +@Component({ + selector: 'app-root', + imports: [HighlightDirective], + template: ` +

Directive with Signals

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App {} diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/highlight-directive.ts b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/highlight-directive.ts new file mode 100644 index 000000000000..5c1c1892d1a6 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/answer/src/app/highlight-directive.ts @@ -0,0 +1,42 @@ +import {Directive, input, computed, signal} from '@angular/core'; + +@Directive({ + selector: '[highlight]', + host: { + '[style.backgroundColor]': 'backgroundStyle()', + '(mouseenter)': 'onMouseEnter()', + '(mouseleave)': 'onMouseLeave()', + }, +}) +export class HighlightDirective { + // Signal inputs + color = input('yellow'); + intensity = input(0.3); + + // Internal signal state + private isHovered = signal(false); + + // Computed signal for background style + backgroundStyle = computed(() => { + const baseColor = this.color(); + const alpha = this.isHovered() ? this.intensity() : this.intensity() * 0.5; + + // Simple color mapping + const colorMap: Record = { + 'yellow': `rgba(255, 255, 0, ${alpha})`, + 'blue': `rgba(0, 100, 255, ${alpha})`, + 'green': `rgba(0, 200, 0, ${alpha})`, + 'red': `rgba(255, 0, 0, ${alpha})`, + }; + + return colorMap[baseColor] || colorMap['yellow']; + }); + + onMouseEnter() { + this.isHovered.set(true); + } + + onMouseLeave() { + this.isHovered.set(false); + } +} diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/config.json b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/config.json new file mode 100644 index 000000000000..5df1706f9005 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/config.json @@ -0,0 +1,5 @@ +{ + "openFiles": ["src/app/app.ts", "src/app/highlight-directive.ts", "src/app/app.css"], + "type": "editor", + "title": "Using signals with directives" +} diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/src/app/app.css b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/src/app/app.css new file mode 100644 index 000000000000..f1ce96b20ef2 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/src/app/app.css @@ -0,0 +1,82 @@ +.highlight-demo { + max-width: 1200px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.demo-section { + margin-bottom: 40px; + padding: 20px; + border: 1px solid #e5e7eb; + border-radius: 8px; +} + +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 20px; + margin: 20px 0; +} + +.product-card { + padding: 20px; + border: 1px solid #e5e7eb; + border-radius: 8px; + cursor: pointer; +} + +.price { + font-size: 1.2em; + font-weight: bold; + color: #059669; + margin: 8px 0; +} + +.intensity { + font-size: 0.9em; + color: #6b7280; + font-style: italic; +} + +.text-examples { + margin: 20px 0; +} + +.text-examples p { + padding: 12px; + margin: 16px 0; + border-radius: 4px; +} + +.text-examples button { + padding: 12px 24px; + border: 1px solid #d1d5db; + border-radius: 6px; + background: white; + cursor: pointer; + font-size: 16px; + margin: 16px 8px; +} + +.info-box { + padding: 20px; + border: 1px solid #d1d5db; + border-radius: 8px; + margin: 16px 0; +} + +.info-box h4 { + margin-top: 0; + color: #374151; +} + +h1, h2, h3 { + color: #111827; + margin-top: 0; +} + +p { + color: #6b7280; + line-height: 1.5; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/src/app/app.ts b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/src/app/app.ts new file mode 100644 index 000000000000..19836f2a0edf --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/src/app/app.ts @@ -0,0 +1,27 @@ +import {Component, ChangeDetectionStrategy} from '@angular/core'; +import {HighlightDirective} from './highlight-directive'; + +@Component({ + selector: 'app-root', + imports: [HighlightDirective], + template: ` +

Directive with Signals

+ + + + +First, add the `viewChild` import to access child components in `app.ts`. + +```ts +import {Component, signal, computed, viewChild} from '@angular/core'; +``` + + + + +Add viewChild queries to the App component to access child components. + +```ts +// Query APIs to access child components +firstProduct = viewChild(ProductCard); +cartSummary = viewChild(CartSummary); +``` + +These queries create signals that reference child component instances. + + + +Use the viewChild queries to call methods on child components in `app.ts`: + +```ts +showFirstProductDetails() { + const product = this.firstProduct(); + if (product) { + product.highlight(); + } +} + +initiateCheckout() { + const summary = this.cartSummary(); + if (summary) { + summary.initiateCheckout(); + } +} +``` + + + + +The control buttons should now work: + +- **"Show First Product Details"** - Calls `highlight()` on the ProductCard +- **"Initiate Checkout"** - Calls `initiateCheckout()` on the CartSummary + +Click the buttons to see how viewChild queries enable parent components to control child behavior. + + + + +Perfect! You've learned how to use signal-based query APIs for child component interaction: + +In the next lesson, you'll learn about [how to react to signal changes with effect](/tutorials/signals/9-reacting-to-signal-changes-with-effect)! diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/app.css new file mode 100644 index 000000000000..28c6d3341f4c --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/app.css @@ -0,0 +1,127 @@ +/* ProductCard Component Styles */ +.product-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px; + margin: 8px; + background: #f9f9f9; +} + +.price { + font-size: 1.2em; + font-weight: bold; + color: #2e7d32; +} + +.description { + color: #666; + margin: 8px 0; +} + +.actions { + margin-top: 12px; +} + +.details { + margin-top: 12px; + padding: 8px; + background: #e8f5e8; + border-radius: 4px; +} + +.product-card button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; + margin-right: 8px; +} + +.product-card button:disabled { + background: #ccc; + cursor: not-allowed; +} + +/* CartSummary Component Styles */ +.cart-summary { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px; + background: #f0f8ff; +} + +.cart-summary .actions { + margin-top: 12px; +} + +.cart-summary button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; + margin-right: 8px; +} + +.cart-summary button:disabled { + background: #ccc; + cursor: not-allowed; +} + +/* App Component Styles */ +.shopping-app { + max-width: 1000px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.controls { + margin: 20px 0; +} + +.products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 16px; + margin: 20px 0; +} + +.cart-section { + border-top: 1px solid #ddd; + padding-top: 20px; + margin-top: 20px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.cart-controls { + display: flex; + align-items: center; + gap: 8px; +} + +.quantity { + min-width: 30px; + text-align: center; + font-weight: bold; +} + +.shopping-app button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; + margin-right: 8px; +} + +.shopping-app button:disabled { + background: #ccc; + cursor: not-allowed; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/app.ts new file mode 100644 index 000000000000..7de9e7c825d0 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/app.ts @@ -0,0 +1,78 @@ +import {Component, signal, computed, viewChild, ChangeDetectionStrategy} from '@angular/core'; +import {CartSummary} from './cart-summary'; +import {ProductCard} from './product-card'; + +@Component({ + selector: 'app-root', + imports: [ProductCard, CartSummary], + template: ` +

Advanced Shopping Cart

+ Quantity: + + {{ cartQuantity() }} + +

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + cartQuantity = signal(2); + + // Query APIs to access child components + firstProduct = viewChild(ProductCard); + allProducts = viewChild.required(ProductCard, {read: ProductCard}); + cartSummary = viewChild(CartSummary); + + totalPrice = computed(() => { + return this.cartQuantity() * 999; + }); + + updateQuantity(change: number) { + const newQuantity = this.cartQuantity() + change; + if (newQuantity >= 0 && newQuantity <= 10) { + this.cartQuantity.set(newQuantity); + } + } + + showFirstProductDetails() { + const product = this.firstProduct(); + if (product) { + product.highlight(); + } + } + + initiateCheckout() { + const summary = this.cartSummary(); + if (summary) { + summary.initiateCheckout(); + } + } +} diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/cart-summary.ts b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/cart-summary.ts new file mode 100644 index 000000000000..16151af5ebb6 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/cart-summary.ts @@ -0,0 +1,37 @@ +import {Component, input, signal, OnDestroy, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'cart-summary', + template: ` +

Cart Summary {{ isAnimating() ? '🎉' : '' }}

Items: {{ itemCount() }}

Total: \${{ total() }}

+ @if (isAnimating()) { +

Processing checkout...

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CartSummary implements OnDestroy { + itemCount = input.required(); + total = input.required(); + + isAnimating = signal(false); + + private timeoutId?: ReturnType; + + // Public method for parent interaction + initiateCheckout() { + this.isAnimating.set(true); + this.timeoutId = setTimeout(() => this.isAnimating.set(false), 2000); + } + + ngOnDestroy() { + if (this.timeoutId) { + clearTimeout(this.timeoutId); + } + } +} diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/product-card.ts b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/product-card.ts new file mode 100644 index 000000000000..f46acef3ac3f --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/answer/src/app/product-card.ts @@ -0,0 +1,44 @@ +import {Component, input, signal, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'product-card', + template: ` +

\${{ price() }}

+ @if (showDetails()) { +

Product ID: {{ productId() }}

Category: {{ category() }}

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class ProductCard { + name = input.required(); + price = input.required(); + description = input(''); + available = input(true); + productId = input(''); + category = input(''); + + showDetails = signal(false); + + toggleDetails() { + this.showDetails.set(!this.showDetails()); + } + + // Public methods for parent interaction + highlight() { + this.showDetails.set(true); + } +} diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/config.json b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/config.json new file mode 100644 index 000000000000..148894a2918c --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/config.json @@ -0,0 +1,10 @@ +{ + "openFiles": [ + "src/app/app.ts", + "src/app/product-card.ts", + "src/app/cart-summary.ts", + "src/app/app.css" + ], + "type": "editor", + "title": "Query child elements with signal queries" +} diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/app.css b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/app.css new file mode 100644 index 000000000000..28c6d3341f4c --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/app.css @@ -0,0 +1,127 @@ +/* ProductCard Component Styles */ +.product-card { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px; + margin: 8px; + background: #f9f9f9; +} + +.price { + font-size: 1.2em; + font-weight: bold; + color: #2e7d32; +} + +.description { + color: #666; + margin: 8px 0; +} + +.actions { + margin-top: 12px; +} + +.details { + margin-top: 12px; + padding: 8px; + background: #e8f5e8; + border-radius: 4px; +} + +.product-card button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; + margin-right: 8px; +} + +.product-card button:disabled { + background: #ccc; + cursor: not-allowed; +} + +/* CartSummary Component Styles */ +.cart-summary { + border: 1px solid #ddd; + border-radius: 8px; + padding: 16px; + background: #f0f8ff; +} + +.cart-summary .actions { + margin-top: 12px; +} + +.cart-summary button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; + margin-right: 8px; +} + +.cart-summary button:disabled { + background: #ccc; + cursor: not-allowed; +} + +/* App Component Styles */ +.shopping-app { + max-width: 1000px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.controls { + margin: 20px 0; +} + +.products { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 16px; + margin: 20px 0; +} + +.cart-section { + border-top: 1px solid #ddd; + padding-top: 20px; + margin-top: 20px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; +} + +.cart-controls { + display: flex; + align-items: center; + gap: 8px; +} + +.quantity { + min-width: 30px; + text-align: center; + font-weight: bold; +} + +.shopping-app button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; + margin-right: 8px; +} + +.shopping-app button:disabled { + background: #ccc; + cursor: not-allowed; +} \ No newline at end of file diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/app.ts b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/app.ts new file mode 100644 index 000000000000..5c1646f8e7bd --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/app.ts @@ -0,0 +1,74 @@ +// TODO: Import viewChild from @angular/core +import {Component, signal, computed, ChangeDetectionStrategy} from '@angular/core'; +import {CartSummary} from './cart-summary'; +import {ProductCard} from './product-card'; + +@Component({ + selector: 'app-root', + imports: [ProductCard, CartSummary], + template: ` +

Advanced Shopping Cart

+ Quantity: + + {{ cartQuantity() }} + +

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + cartQuantity = signal(2); + + // TODO: Create viewChild queries to access child components + // firstProduct = viewChild(ProductCard); + // cartSummary = viewChild(CartSummary); + + totalPrice = computed(() => { + return this.cartQuantity() * 999; + }); + + updateQuantity(change: number) { + const newQuantity = this.cartQuantity() + change; + if (newQuantity >= 0 && newQuantity <= 10) { + this.cartQuantity.set(newQuantity); + } + } + + showFirstProductDetails() { + // TODO: Get the first product using viewChild and call its highlight() method + console.log('TODO: Implement show first product details'); + } + + initiateCheckout() { + // TODO: Get the cart summary using viewChild and call its initiateCheckout() method + console.log('TODO: Implement initiate checkout'); + } +} diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/cart-summary.ts b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/cart-summary.ts new file mode 100644 index 000000000000..16151af5ebb6 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/cart-summary.ts @@ -0,0 +1,37 @@ +import {Component, input, signal, OnDestroy, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'cart-summary', + template: ` +

Cart Summary {{ isAnimating() ? '🎉' : '' }}

Items: {{ itemCount() }}

Total: \${{ total() }}

+ @if (isAnimating()) { +

Processing checkout...

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CartSummary implements OnDestroy { + itemCount = input.required(); + total = input.required(); + + isAnimating = signal(false); + + private timeoutId?: ReturnType; + + // Public method for parent interaction + initiateCheckout() { + this.isAnimating.set(true); + this.timeoutId = setTimeout(() => this.isAnimating.set(false), 2000); + } + + ngOnDestroy() { + if (this.timeoutId) { + clearTimeout(this.timeoutId); + } + } +} diff --git a/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/product-card.ts b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/product-card.ts new file mode 100644 index 000000000000..f46acef3ac3f --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/8-query-child-elements-with-signal-queries/src/app/product-card.ts @@ -0,0 +1,44 @@ +import {Component, input, signal, ChangeDetectionStrategy} from '@angular/core'; + +@Component({ + selector: 'product-card', + template: ` +

\${{ price() }}

+ @if (showDetails()) { +

Product ID: {{ productId() }}

Category: {{ category() }}

Theme Manager with Effects

+ + + @if (!isLoggedIn()) { + + } @else { + + } +

Current theme: {{ theme() }}

User: {{ username() }}

Status: {{ isLoggedIn() ? 'Logged in' : 'Logged out' }}

Open the browser console to see the effects in action!

Effects are automatically:

Saving theme to localStorage
Logging user activity changes
Running a timer every 5 seconds

Theme Manager with Effects

+ + + @if (!isLoggedIn()) { + + } @else { + + } +

Current theme: {{ theme() }}

User: {{ username() }}

Status: {{ isLoggedIn() ? 'Logged in' : 'Logged out' }}

+Let's build an interactive user status system with signals! -Let's build an interactive user status system with signals. +

Open the browser console to see the effects in action!

Effects will automatically:

Save theme to localStorage
Log user activity changes
Run a timer every 5 seconds

@@ -38,18 +38,25 @@ export class App { -Update the template to display the current user status by calling the signal `userStatus()` with parentheses. +Update the status indicator to display the current user status by: +1. Binding the signal to the class attribute with `[class]="userStatus()"` +2. Displaying the status text by replacing `???` with `{{ userStatus() }}` ```html -

User Dashboard

- - Status: {{ userStatus() }} -

+ + Status: ??? +

+ + Status: {{ userStatus() }}

``` +Notice how we call the signal `userStatus()` with parentheses to read its value. @@ -69,25 +76,19 @@ The `set()` method replaces the signal's value entirely with a new value. - -Add control buttons to the template for changing the user's status. + +The buttons are already in the template. Now connect them to your methods by adding: +1. Click handlers with `(click)` +2. Disabled states with `[disabled]` when already in that status ```html -

User Dashboard

+ + + ``` @@ -105,17 +106,13 @@ The `update()` method takes a function that receives the current value and retur - -Add the toggle button to your status controls. + +The toggle button is already in the template. Connect it to your `toggleStatus()` method: ```html -

+ ``` diff --git a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.css index 13f074dd9ee2..1814243f9154 100644 --- a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.css +++ b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/answer/src/app/app.css @@ -45,3 +45,34 @@ .away .status-dot { background-color: #ff9800; } + +.status-controls { + display: flex; + gap: 8px; + flex-wrap: wrap; +} + +button { + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + font-weight: bold; + transition: background-color 0.2s; +} + +button:not(:disabled) { + background-color: #007bff; + color: white; +} + +button:disabled { + background-color: #6c757d; + color: #fff; + cursor: not-allowed; + opacity: 0.6; +} + +.status-controls .toggle-btn { + background-color: #28a745; +} diff --git a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/src/app/app.ts b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/src/app/app.ts index 9df8c6eb44b5..c043693e0dad 100644 --- a/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/src/app/app.ts +++ b/adev/src/content/tutorials/signals/steps/1-creating-your-first-signal/src/app/app.ts @@ -6,12 +6,24 @@ import {Component, ChangeDetectionStrategy} from '@angular/core'; template: `

User Dashboard

Status: ???

@if (!isLoggedIn()) { @@ -21,7 +26,13 @@ import {Component, signal, computed, effect, ChangeDetectionStrategy} from '@ang

Current theme: {{ theme() }}

User: {{ username() }}

Status: {{ isLoggedIn() ? 'Logged in' : 'Logged out' }}

Status: + @if (isLoggedIn()) { + Logged in + } @else { + Logged out + } +

@if (!isLoggedIn()) { @@ -23,7 +28,13 @@ import {Component, signal, computed, ChangeDetectionStrategy} from '@angular/cor

Current theme: {{ theme() }}

User: {{ username() }}

Status: {{ isLoggedIn() ? 'Logged in' : 'Logged out' }}

Status: + @if (isLoggedIn()) { + Logged in + } @else { + Logged out + } +

+Let's enhance our user status system by adding computed values that derive information from our user status signal. The starter code now includes three status options: `'online'`, `'away'`, and `'offline'`. -Let's enhance our user status system by adding computed values that derive information from our user status signal. +

@@ -15,7 +15,7 @@ Add `computed` to your existing imports. ```ts // Add computed to existing imports -import {Component, signal, computed} from '@angular/core'; +import {Component, signal, computed, ChangeDetectionStrategy} from '@angular/core'; ``` @@ -64,41 +64,35 @@ This demonstrates how computed signals can perform calculations and combine mult -Update your template to use the computed signals. +The template already has placeholders showing "Loading...". Replace them with your computed signals: + +1. For notifications, replace `Loading...` with an @if block: + +```html +@if (notificationsEnabled()) { + Enabled +} @else { + Disabled +} +``` + +2. For the message, replace `Loading...` with: + +```html +{{ statusMessage() }} +``` + +3. For working hours, replace `Loading...` with an @if block: ```html - -

- - Status: {{ userStatus() }} -

- Notifications: - @if (notificationsEnabled()) { - Enabled - } @else { - Disabled - } -

- Message: {{ statusMessage() }} -

- Within Working Hours: - @if (isWithinWorkingHours()) { - Yes - } @else { - No - } -

- - +@if (isWithinWorkingHours()) { + Yes +} @else { + No +} ``` +Notice how computed signals are called just like regular signals - with parentheses! diff --git a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/src/app/app.ts b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/src/app/app.ts index e61c96e8b207..946058489c2e 100644 --- a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/src/app/app.ts +++ b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/src/app/app.ts @@ -13,13 +13,19 @@ import {Component, signal, ChangeDetectionStrategy} from '@angular/core';

- Notifications: Loading... + Notifications: + + Loading...

- Message: Loading... + Message: + + Loading...

- Within Working Hours: Loading... + Within Working Hours: + + Loading...

diff --git a/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md index a0922d2b1c1e..5623d00ed35d 100644 --- a/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md +++ b/adev/src/content/tutorials/signals/steps/3-deriving-state-with-linked-signals/README.md @@ -1,23 +1,21 @@ # Deriving state with linked signals -In the [previous lesson](/tutorials/signals/2-deriving-state-with-computed-signals), you created a computed signal for `notificationsEnabled` that automatically followed your user status. But what if users want to manually disable notifications even when they're online? That's where linked signals come in. +Now that you've learned [how to derive state with computed signals](/tutorials/signals/2-deriving-state-with-computed-signals), you created a computed signal for `notificationsEnabled` that automatically followed your user status. But what if users want to manually disable notifications even when they're online? That's where linked signals come in. Linked signals are writable signals that maintain a reactive connection to their source signals. They're perfect for creating state that normally follows a computation but can be overridden when needed. -In this activity, you'll learn how `linkedSignal()` differs from `computed()` by converting your notifications example. +In this activity, you'll learn how `linkedSignal()` differs from `computed()` by enhancing the previous user status system's computed `notificationsEnabled` to a writable linked signal.

-Let's enhance our user status system by converting the read-only computed `notificationsEnabled` to a writable linked signal. - Add `linkedSignal` to your existing imports. ```ts -// Add linkedSignal to existing imports -import {Component, signal, computed, linkedSignal} from '@angular/core'; +// Add linkedSignal to existing imports +import {Component, signal, computed, linkedSignal, ChangeDetectionStrategy} from '@angular/core'; ``` @@ -49,13 +47,13 @@ toggleNotifications() { This is the key difference: computed signals are read-only, but linked signals can be updated manually while still maintaining their reactive connection. - + Update your template to add a toggle button for notifications: ```html

- Notifications: Loading... + Notifications: + @if (notificationsEnabled()) { + Enabled + } @else { + Disabled + }

@@ -29,7 +34,7 @@ import {Component, signal, computed, ChangeDetectionStrategy} from '@angular/cor }

+ + + + +``` + +Part 2. **Replace the placeholder with resource state handling:** -

- @if (isLoading()) { -

Loading user...

- } @else if (hasError()) { -

Error: {{ userResource.error()?.message }}

- } @else if (userResource.hasValue()) { -

- } +```html +@if (isLoading()) { +

Loading user...

+} @else if (hasError()) { +

Error: {{ userResource.error()?.message }}

+} @else if (userResource.hasValue()) { +

+} ``` +The resource provides different methods to check its state: + +- `isLoading()` - true when fetching data +- `hasError()` - true when an error occurred +- `userResource.hasValue()` - true when data is available +- `userResource.value()` - access the loaded data +- `userResource.error()` - access error information + @@ -103,4 +107,4 @@ Excellent! You've now learned how to use the Resource API with signals. Key conc - **Automatic cleanup**: Resources handle request cancellation and cleanup automatically - **Manual control**: You can manually reload or abort requests when needed -In the next lesson, you'll learn [how to use signals for communication between components](/tutorials/signals/5-component-communication-with-signals)! +In the next lesson, you'll learn [how to pass data to components with input signals](/tutorials/signals/5-component-communication-with-signals)! diff --git a/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/src/app/app.ts b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/src/app/app.ts index 972f358fb1b2..7c8dc6a1356b 100644 --- a/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/src/app/app.ts +++ b/adev/src/content/tutorials/signals/steps/4-managing-async-data-with-signals/src/app/app.ts @@ -8,16 +8,21 @@ import {loadUser} from './user-api';

User Profile Loader

diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md index 9153641e75b9..528af3b1b342 100644 --- a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/README.md @@ -1,192 +1,105 @@ -# Component communication with signals +# Passing data to components with input signals -Now that you've learned [managing async data with signals](/tutorials/signals/4-managing-async-data-with-signals), let's explore Angular's signal-based APIs for component inputs, outputs, and two-way binding, making component data flow more reactive and efficient. +Now that you've learned [managing async data with signals](/tutorials/signals/4-managing-async-data-with-signals), let's explore Angular's signal-based `input()` API for passing data from parent to child components, making component data flow more reactive and efficient. If you're familiar with component props from other frameworks, inputs are the same idea. -In this activity, you'll add signal communication to pre-built components to see the three main patterns in action. +In this activity, you'll add signal inputs to a product card component and see how parent data flows down reactively.

- + + + + +

Click a button to load user data

-Add signal `input` and `output` to receive and send data in the `product-card` component. +Add signal `input()` functions to receive data in the `product-card` component. ```ts -// Add imports for signal based communication between components -import {Component, input, output} from '@angular/core'; +// Add imports for signal inputs +import {Component, input} from '@angular/core'; // Add these signal inputs name = input.required(); price = input.required(); available = input(true); - -// Add signal output -addProductToCart = output(); ``` +Notice how `input.required()` creates an input that must be provided, while `input()` with a default value is optional. - -Update the template in `product-card` to display the signal values and handle clicks. + +Update the template in `product-card` to display the signal input values. ```html

\${{ price() }}

Status: {{ available() ? 'Available' : 'Out of Stock' }}

``` - - - -Implement the method that emits data from the child to the parent and updates the app to display the last added product. - -```ts -// product-card.ts -addToCart() { - if (this.available()) { - this.addProductToCart.emit(this.name()); - } -} -``` - -```html - -

Status: + @if (available()) { + Available + } @else { + Out of Stock + } +

Last product added to cart: {{ lastAdded() || 'None yet' }}

-``` - +Input signals work just like regular signals in templates - call them as functions to access their values. -Chase the static values on the `product-card` component in `app.ts` to use dynamic values from the parent's signals. +Update the `product-card` usage in `app.ts` to pass dynamic signal values instead of static ones. ```html

``` +The square brackets `[]` create property bindings that pass the current signal values to the child.

- -Add a method to handle the the `addProductToCart` output from `product-card` in `app.ts`. + +Add methods in `app.ts` to update the parent signals and see how the child component reacts automatically. ```ts -onProductClicked(productName: string) { - this.lastAdded.set(`${productName}`); +updateProduct() { + this.productName.set('Updated Product'); + this.productPrice.set(149); } -``` - - - - -Next, we need to setup two-way binding with a signal model in `quantity-selector.ts` file to receive and update the parent's signal model. - -```ts -// Add imports -import {Component, input, model} from '@angular/core'; - -// Signal model input which receives parent's model -quantity = model.required(); - -// Signal inputs for constraints -min = input(1); -max = input(10); -``` - -This creates a model input that will receive the parent's signal model. - - -Update the `quantity-selector.ts` component to use the model and add increment/decrement methods. - -```html -

- Quantity: - - {{ quantity() }} - -

-``` - -```ts -// Methods that modify the parent's model -increment() { - if (this.quantity() < this.max()) { - this.quantity.set(this.quantity() + 1); - } -} - -decrement() { - if (this.quantity() > this.min()) { - this.quantity.set(this.quantity() - 1); - } -} -``` - -Notice: When the child calls `this.quantity.set()`, it's actually modifying the parent's model! - - - -Create a signal model and connect it to the `quantity-selector` component in `app.ts`. - -```ts -// Add signal model -selectedQuantity = model(1); - -// Add methods to test two-way binding -resetQuantity() { - this.selectedQuantity.set(1); -} - -increaseQuantity() { - this.selectedQuantity.set(this.selectedQuantity() + 1); +toggleAvailability() { + this.productAvailable.set(!this.productAvailable()); } ``` -Then update the template to show the two-way binding in action: - ```html -// With the actual component and controls: - - - +

Selected quantity: {{ selectedQuantity() }}

- - + +

Component Communication with Signals

Input Signals Demo

Signal Inputs (Parent → Child)

@@ -17,7 +16,6 @@ import {QuantitySelector} from './quantity-selector'; [name]="productName()" [price]="productPrice()" [available]="productAvailable()" - (addProductToCart)="onProductClicked($event)" />

@@ -25,37 +23,6 @@ import {QuantitySelector} from './quantity-selector';

Signal Models (Parent ↔ Child)

Two-way binding allows parent and child to share state:

Selected quantity: {{ selectedQuantity() }}

Try this:

Click +/- buttons above (child changes parent)
Click "Increase from Parent" (parent changes child)
Both automatically sync! That's the power of signal models.

`, styleUrl: './app.css', @@ -67,12 +34,6 @@ export class App { productPrice = signal(99); productAvailable = signal(true); - // Signal model for two-way binding - selectedQuantity = model(1); - - // Signal for tracking events - lastAdded = signal(null); - updateProduct() { this.productName.set(`Product ${Math.floor(Math.random() * 100)}`); this.productPrice.set(Math.floor(Math.random() * 500) + 50); @@ -81,16 +42,4 @@ export class App { toggleAvailability() { this.productAvailable.set(!this.productAvailable()); } - - resetQuantity() { - this.selectedQuantity.set(1); - } - - increaseQuantity() { - this.selectedQuantity.set(this.selectedQuantity() + 1); - } - - onProductClicked(productName: string) { - this.lastAdded.set(`${productName}`); - } } diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/product-card.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/product-card.ts index 6eb902d40c2d..1e116f5066cb 100644 --- a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/product-card.ts +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/product-card.ts @@ -1,4 +1,4 @@ -import {Component, input, output, ChangeDetectionStrategy} from '@angular/core'; +import {Component, input, ChangeDetectionStrategy} from '@angular/core'; @Component({ selector: 'product-card', @@ -6,12 +6,14 @@ import {Component, input, output, ChangeDetectionStrategy} from '@angular/core';

Signal Outputs (Child → Parent)

Last product added to cart: {{ lastAdded() || 'None yet' }}

\${{ price() }}

Status: {{ available() ? 'Available' : 'Out of Stock' }}

`, changeDetection: ChangeDetectionStrategy.OnPush, @@ -21,13 +23,4 @@ export class ProductCard { name = input.required(); price = input.required(); available = input(true); - - // Signal output - send events to parent - addProductToCart = output(); - - addToCart() { - if (this.available()) { - this.addProductToCart.emit(this.name()); - } - } } diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/quantity-selector.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/quantity-selector.ts deleted file mode 100644 index 760508f5e12d..000000000000 --- a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/answer/src/app/quantity-selector.ts +++ /dev/null @@ -1,34 +0,0 @@ -import {Component, input, model, ChangeDetectionStrategy} from '@angular/core'; - -@Component({ - selector: 'quantity-selector', - template: ` -

+ Status: + @if (available()) { + Available + } @else { + Out of Stock + } +

- Quantity: - - {{ quantity() }} - -

Component Communication with Signals

Input Signals Demo

Signal Inputs (Parent → Child)

Data flows down from parent to child via signal inputs:

- - +

Signal Models (Parent ↔ Child)

Two-way binding allows parent and child to share state:

- - - - -

Selected quantity: 1

After implementing signal models:

Click +/- buttons (child changes parent)
Click "Increase from Parent" (parent changes child)
Watch both sync automatically!

`, styleUrl: './app.css', changeDetection: ChangeDetectionStrategy.OnPush, }) export class App { - productName = signal('Demo Product'); - productPrice = signal(99); - productAvailable = signal(true); - lastAdded = signal(null); - - // TODO: Create signal model for selectedQuantity - // TODO: Create signal for lastAdded tracking - - updateProduct() { - this.productName.set(`Product ${Math.floor(Math.random() * 100)}`); - this.productPrice.set(Math.floor(Math.random() * 500) + 50); - } - - toggleAvailability() { - this.productAvailable.set(!this.productAvailable()); - } - - resetQuantity() { - // TODO: Reset selectedQuantity to 1 - console.log('TODO: Reset quantity'); - } - - increaseQuantity() { - // TODO: Increase selectedQuantity by 1 - console.log('TODO: Increase quantity'); - } - - // TODO: Add onProductClicked method to handle child events + // TODO: Create parent signals for product data + // productName = signal('Demo Product'); + // productPrice = signal(99); + // productAvailable = signal(true); + // TODO: Add methods to update parent signals + // updateProduct() { + // this.productName.set('Updated Product'); + // this.productPrice.set(149); + // } + // toggleAvailability() { + // this.productAvailable.set(!this.productAvailable()); + // } } diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/product-card.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/product-card.ts index ff2e8903fa9c..5e3ad8d2759c 100644 --- a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/product-card.ts +++ b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/product-card.ts @@ -1,21 +1,22 @@ import {Component, ChangeDetectionStrategy} from '@angular/core'; -// TODO: Import input and output from @angular/core +// TODO: Import input from @angular/core @Component({ selector: 'product-card', template: `

Signal Outputs (Child → Parent)

Last product clicked on: None yet

Product Name

Status: Available

`, changeDetection: ChangeDetectionStrategy.OnPush, }) export class ProductCard { // TODO: Create signal inputs for name, price, and available - // TODO: Create signal output for clicked events - // TODO: Implement addToCart method + // name = input.required(); + // price = input.required(); + // available = input(true); } diff --git a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/quantity-selector.ts b/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/quantity-selector.ts deleted file mode 100644 index 2727ffecadd7..000000000000 --- a/adev/src/content/tutorials/signals/steps/5-component-communication-with-signals/src/app/quantity-selector.ts +++ /dev/null @@ -1,23 +0,0 @@ -import {Component, ChangeDetectionStrategy} from '@angular/core'; - -// TODO: Import input and model from @angular/core - -@Component({ - selector: 'quantity-selector', - template: ` -

- Quantity: - - 1 - -

- `, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class QuantitySelector { - // TODO: Create signal model INPUT for quantity (not creating a new model!) - // Use model.required() to receive parent's model - // TODO: Create signal inputs for min and max constraints - // TODO: Add increment method that updates the model - // TODO: Add decrement method that updates the model -} diff --git a/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md new file mode 100644 index 000000000000..d68cdee85f26 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/README.md @@ -0,0 +1,128 @@ +# Two-way binding with model signals + +Now that you've learned [passing data to components with input signals](/tutorials/signals/5-component-communication-with-signals), let's explore Angular's `model()` API for two-way binding. Model signals are perfect for UI components like checkboxes, sliders, or custom form controls where the component needs to both receive a value AND update it. + +In this activity, you'll create a custom checkbox component that manages its own state while keeping the parent synchronized. + +

+ + + + +Create a model signal in the `custom-checkbox` component that can both receive and update the parent's value. + +```ts +// Add imports for model signals +import {Component, model, input} from '@angular/core'; + +// Model signal for two-way binding +checked = model.required(); + +// Optional input for label +label = input(''); +``` + +Unlike `input()` signals which are read-only, `model()` signals can be both read and written to. + + + +Build the checkbox template that responds to clicks and updates its own model. + +```html + + + + {{ label() }} + +``` + +The component reads from its model signal and has a method to update it. + + + +Implement the toggle method that updates the model signal when the checkbox is clicked. + +```ts +toggle() { + // This updates BOTH the component's state AND the parent's model! + this.checked.set(!this.checked()); +} +``` + +When the child component calls `this.checked.set()`, it automatically propagates the change back to the parent. This is the key difference from `input()` signals. + + + +First, uncomment the model signal properties and methods in `app.ts`: + +```ts +// Parent signal models +agreedToTerms = model(false); +enableNotifications = model(true); + +// Methods to test two-way binding +toggleTermsFromParent() { + this.agreedToTerms.set(!this.agreedToTerms()); +} + +resetAll() { + this.agreedToTerms.set(false); + this.enableNotifications.set(false); +} +``` + +Then update the template: + +Part 1. **Uncomment the checkboxes and add two-way binding:** + +- Replace `___ADD_TWO_WAY_BINDING___` with `[(checked)]="agreedToTerms"` for the first checkbox +- Replace `___ADD_TWO_WAY_BINDING___` with `[(checked)]="enableNotifications"` for the second + +Part 2. **Replace the `???` placeholders with @if blocks:** + +```html +@if (agreedToTerms()) { + Yes +} @else { + No +} +``` + +Part 3. **Add click handlers to the buttons:** + +```html + + +``` + +The `[(checked)]` syntax creates two-way binding - data flows down to the component AND changes flow back up to the parent by emitting an event that references the signal itself and does _not_ call the signal getter directly. + + + +Interact with your app to see two-way binding in action: + +1. **Click checkboxes** - Component updates its own state and notifies parent +2. **Click "Toggle Terms from Parent"** - Parent updates propagate down to component +3. **Click "Reset All"** - Parent resets both models and components update automatically + +Both the parent and child can update the shared state, and both stay in sync automatically! + + + + +Perfect! You've learned how model signals enable two-way binding: + +- **Model signals** - Use `model()` and `model.required()` for values that can be both read and written +- **Two-way binding** - Use `[(property)]` syntax to bind parent signals to child models +- **Perfect for UI components** - Checkboxes, form controls, and widgets that need to manage their own state +- **Automatic synchronization** - Parent and child stay in sync without manual event handling + +**When to use `model()` vs `input()`:** + +- Use `input()` for data that only flows down (display data, configuration) +- Use `model()` for UI components that need to update their own value (form controls, toggles) + +In the next lesson, you'll learn about [using signals with services](/tutorials/signals/7-using-signals-with-services)! diff --git a/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/answer/src/app/app.css b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/answer/src/app/app.css new file mode 100644 index 000000000000..82435c614705 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/answer/src/app/app.css @@ -0,0 +1,81 @@ +/* CustomCheckbox Component Styles */ +.custom-checkbox { + display: flex; + align-items: center; + gap: 8px; + margin: 12px 0; + cursor: pointer; + user-select: none; +} + +.custom-checkbox input[type='checkbox'] { + margin: 0; +} + +.checkmark { + width: 18px; + height: 18px; + border: 2px solid #ddd; + border-radius: 3px; + display: inline-block; + position: relative; +} + +.custom-checkbox input[type='checkbox']:checked + .checkmark { + background-color: #4caf50; + border-color: #4caf50; +} + +.custom-checkbox input[type='checkbox']:checked + .checkmark::after { + content: '✓'; + position: absolute; + color: white; + font-size: 14px; + top: -2px; + left: 2px; +} + +/* App Component Styles */ +.shopping-app { + max-width: 600px; + margin: 0 auto; + padding: 20px; + font-family: Arial, sans-serif; +} + +.demo-section { + margin: 20px 0; + padding: 20px; + border: 1px solid #e0e0e0; + border-radius: 8px; + background: #fafafa; +} + +.controls { + margin: 20px 0; + padding: 16px; + background: #f0f8ff; + border-radius: 8px; + border-left: 4px solid #007bff; +} + +.controls p { + margin: 8px 0; + font-weight: bold; +} + +button { + margin-right: 8px; + padding: 8px 16px; + border: none; + border-radius: 4px; + cursor: pointer; + background: #1976d2; + color: white; + font-weight: bold; + transition: background-color 0.2s; +} + +button:hover { + background: #1565c0; +} diff --git a/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/answer/src/app/app.ts new file mode 100644 index 000000000000..8b2a8cbe2541 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/answer/src/app/app.ts @@ -0,0 +1,63 @@ +import {Component, model, ChangeDetectionStrategy} from '@angular/core'; +import {CustomCheckbox} from './custom-checkbox'; + +@Component({ + selector: 'app-root', + imports: [CustomCheckbox], + template: ` +

Custom Checkbox Example

+ + + + + + +

Terms agreed: + @if (agreedToTerms()) { + Yes + } @else { + No + } +

Notifications: + @if (enableNotifications()) { + Enabled + } @else { + Disabled + } +

Custom Checkbox Example

Terms agreed: + + ??? +

Notifications: + + ??? +

+ `, + styleUrl: './app.css', + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class App { + // TODO: Add parent signal models + // agreedToTerms = model(false); + // enableNotifications = model(true); + // TODO: Add methods to test two-way binding + // toggleTermsFromParent() { + // this.agreedToTerms.set(!this.agreedToTerms()); + // } + // resetAll() { + // this.agreedToTerms.set(false); + // this.enableNotifications.set(false); + // } +} diff --git a/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/src/app/custom-checkbox.ts b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/src/app/custom-checkbox.ts new file mode 100644 index 000000000000..a03de74a8f11 --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/6-two-way-binding-with-model-signals/src/app/custom-checkbox.ts @@ -0,0 +1,25 @@ +import {Component, ChangeDetectionStrategy} from '@angular/core'; + +// TODO: Import model and input from @angular/core + +@Component({ + selector: 'custom-checkbox', + template: ` + + + + + + `, + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class CustomCheckbox { + // TODO: Add model signal for two-way binding + // checked = model.required(); + // TODO: Add optional input for label + // label = input(''); + // TODO: Add toggle method + // toggle() { + // this.checked.set(!this.checked()); + // } +} diff --git a/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/README.md b/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/README.md deleted file mode 100644 index 3e82a3f075e7..000000000000 --- a/adev/src/content/tutorials/signals/steps/6-using-signals-with-services/README.md +++ /dev/null @@ -1,173 +0,0 @@ -# Using signals with services - -Now that you've learned [component communication with signals](/tutorials/signals/5-component-communication-with-signals), let's explore how to use signals with Angular services. Services are perfect for sharing reactive state across multiple components, and signals make this even more powerful by providing automatic change detection and clean reactive patterns. - -In this activity, you'll learn how to create a cart store that uses signals to manage shopping cart state and share it across components. - -

- -Let's build a simple shopping cart store that manages cart state with signals, allowing the cart display component to react to cart changes automatically. - - - - -Add readonly and computed signals to make the cart state reactive in `cart-store.ts`. - -```ts -// Readonly signals -readonly cartItems = this.items.asReadonly(); - -// Computed signals -readonly totalQuantity = computed(() => { - return this.items().reduce((sum, item) => sum + item.quantity, 0); -}); - -readonly totalPrice = computed(() => { - return this.items().reduce((sum, item) => sum + item.price * item.quantity, 0); -}); -``` - -These signals allow components to reactively access cart data and computed totals. - - - -Update the cart display component in `cart-display.ts` to use the cart store signals. - -```ts -import {Component, inject} from '@angular/core'; -import {CartStore} from './cart-store'; - -@Component({ - selector: 'cart-display', - template: ` -

Shopping Cart Demo

Add Products

- - @if (cartStore.cartItems().length === 0) { -

Cart Contents

Your cart is empty

- } @else { -

- @for (item of cartStore.cartItems(); track item.id) { -

\${{ item.price }} each

- - {{ item.quantity }} - - -

- } -

Total Items: {{ cartStore.totalQuantity() }}

Total: \${{ cartStore.totalPrice() }}

- `, -}) -export class CartDisplay { - cartStore = inject(CartStore); - - addLaptop() { - this.cartStore.addItem('1', 'Laptop', 999); - } - - addMouse() { - this.cartStore.addItem('2', 'Mouse', 25); - } - - addKeyboard() { - this.cartStore.addItem('3', 'Keyboard', 79); - } - - increaseQuantity(id: string) { - const items = this.cartStore.cartItems(); - const currentItem = items.find((item) => item.id === id); - if (currentItem) { - this.cartStore.updateQuantity(id, currentItem.quantity + 1); - } - } - - decreaseQuantity(id: string) { - const items = this.cartStore.cartItems(); - const currentItem = items.find((item) => item.id === id); - if (currentItem && currentItem.quantity > 1) { - this.cartStore.updateQuantity(id, currentItem.quantity - 1); - } - } - - removeItem(id: string) { - this.cartStore.removeItem(id); - } - - clearCart() { - this.cartStore.clearCart(); - } -} -``` - -This component includes buttons to add products and displays cart contents using service signals. - - - -Update the main app component in `app.ts` to use the cart service and display the cart component. - -```ts -import {Component, inject} from '@angular/core'; -import {CartStore} from './cart-store'; -import {CartDisplay} from './cart-display'; - -@Component({ - selector: 'app-root', - imports: [CartDisplay], - template: ` -

- } -

Signals with Services Demo

- Cart: {{ cartStore.totalQuantity() }} items (\${{ cartStore.totalPrice() }}) -

- `, - styleUrls: ['./app.css'], -}) -export class App { - cartStore = inject(CartStore); -} -``` - -This component demonstrates how services with signals provide automatic reactivity in the header cart badge. - - - - -Excellent! You've now learned how to use signals with services. Key concepts to remember: - -- **Service-level signals**: Services can use signals to manage reactive state -- **Dependency injection**: Use `inject()` to access services with signals in components -- **Computed signals in services**: Create derived state that updates automatically -- **Readonly signals**: Expose read-only versions of signals to prevent external mutations - -In the next lesson, you'll learn about [how to use signals with directives](/tutorials/signals/7-using-signals-with-directives)! diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/README.md b/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/README.md deleted file mode 100644 index e32c864f5f26..000000000000 --- a/adev/src/content/tutorials/signals/steps/7-using-signals-with-directives/README.md +++ /dev/null @@ -1,138 +0,0 @@ -# Using signals with directives - -Now that you've learned [using signals with services](/tutorials/signals/6-using-signals-with-services), let's explore how directives can use signals to create reactive behavior that automatically responds to changes. This makes directives more powerful and easier to manage. - -In this activity, you'll learn how to use signals in directives for reactive styling and user interactions. - -

- -Let's build a simple highlight directive that demonstrates the core signals concepts in directives. - - - - -First, add the signal imports to the directive. - -```ts -import {Directive, input, signal, computed} from '@angular/core'; -``` - -Directives can use all the same signal APIs as components. - - - -Add signal inputs to configure the directive behavior. - -```ts -// Signal inputs for configuration -color = input('yellow'); -intensity = input(0.3); -``` - -Signal inputs allow parent elements to pass reactive data to the directive. - - - -Create an internal signal to track the hover state. - -```ts -// Internal signal for hover state -private isHovered = signal(false); -``` - -This signal will track whether the user is hovering over the element. - - - -Add a computed signal that calculates the background style. - -```ts -// Computed signal for background style -backgroundStyle = computed(() => { - const baseColor = this.color(); - const alpha = this.isHovered() ? this.intensity() : this.intensity() * 0.5; - - const colorMap: Record = { - 'yellow': `rgba(255, 255, 0, ${alpha})`, - 'blue': `rgba(0, 100, 255, ${alpha})`, - 'green': `rgba(0, 200, 0, ${alpha})`, - 'red': `rgba(255, 0, 0, ${alpha})`, - }; - - return colorMap[baseColor] || colorMap['yellow']; -}); -``` - -This computed signal reactively calculates the background color based on inputs and hover state. - - - -Use the `host` object to bind the computed signal and handle events. - -```ts -@Directive({ - selector: '[highlight]', - host: { - '[style.backgroundColor]': 'backgroundStyle()', - '(mouseenter)': 'onMouseEnter()', - '(mouseleave)': 'onMouseLeave()', - }, -}) -``` - -This approach is more declarative and follows Angular v20+ best practices. - - - -Add the methods that update the hover signal. - -```ts -onMouseEnter() { - this.isHovered.set(true); -} - -onMouseLeave() { - this.isHovered.set(false); -} -``` - -These methods update the signal, which automatically triggers the computed signal to recalculate. - - - -Update the app template to demonstrate the directive. - -```ts -template: ` -

Directive with Signals

- Hover me - Yellow highlight -

- Hover me - Blue highlight -

- Hover me - Green highlight -

-`, -``` - -The directive automatically applies reactive highlighting based on the signal inputs. - - - - -Excellent! You've learned how to use signals in directives. Key concepts to remember: - -- **Signal inputs** - Reactive configuration from parent elements -- **Internal signals** - Managing directive state -- **Computed signals** - Reactive calculations based on multiple signals -- **Host object bindings** - A declarative approach to connect signals to DOM properties and events -- **Reactive event handling** - Updating signals in response to user interactions - -Signals make directives more predictable and easier to debug by providing clear reactive data flow. diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md b/adev/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md new file mode 100644 index 000000000000..6d6c5541263c --- /dev/null +++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-services/README.md @@ -0,0 +1,103 @@ +# Using signals with services + +Now that you've learned [two-way binding with model signals](/tutorials/signals/6-two-way-binding-with-model-signals), let's explore how to use signals with Angular services. Services are perfect for sharing reactive state across multiple components, and signals make this even more powerful by providing automatic change detection and clean reactive patterns. + +In this activity, you'll learn how to create a cart store with signals that allow the cart display component to react to state changes automatically. + +

+ + + + +Add readonly and computed signals to make the cart state reactive in `cart-store.ts`. + +```ts +// Add the computed import +import {Injectable, signal, computed} from '@angular/core'; + +// Then add these signals to the class: + +// Readonly signals +readonly cartItems = this.items.asReadonly(); + +// Computed signals +readonly totalQuantity = computed(() => { + return this.items().reduce((sum, item) => sum + item.quantity, 0); +}); + +readonly totalPrice = computed(() => { + return this.items().reduce((sum, item) => sum + item.price * item.quantity, 0); +}); +``` + +These signals allow components to reactively access cart data and computed totals. The `asReadonly()` method prevents external code from modifying the cart items directly, while `computed()` creates derived state that automatically updates when the source signal changes. + + + +The cart display component in `cart-display.ts` already uses the cart store signals in its template. Complete the quantity update methods to modify cart items: + +```ts +increaseQuantity(id: string) { + const items = this.cartStore.cartItems(); + const currentItem = items.find((item) => item.id === id); + if (currentItem) { + this.cartStore.updateQuantity(id, currentItem.quantity + 1); + } +} + +decreaseQuantity(id: string) { + const items = this.cartStore.cartItems(); + const currentItem = items.find((item) => item.id === id); + if (currentItem && currentItem.quantity > 1) { + this.cartStore.updateQuantity(id, currentItem.quantity - 1); + } +} +``` + +These methods read the current cart state using `cartItems()` and update quantities through the store's methods. The UI automatically updates when the signals change! + + + +Update the main app component in `app.ts` to use the cart service and display the cart component. + +```ts +import {Component, inject} from '@angular/core'; +import {CartStore} from './cart-store'; +import {CartDisplay} from './cart-display'; + +@Component({ + selector: 'app-root', + imports: [CartDisplay], + template: ` +

Signals with Services Demo

+ Cart: {{ cartStore.totalQuantity() }} items (\${{ cartStore.totalPrice() }}) +

- - @if (false) { + @if (cartStore.cartItems().length === 0) {

Cart Contents

Your cart is empty

} @else {

- @for (item of []; track item.id) { + @for (item of cartStore.cartItems(); track item.id) {

@@ -39,8 +38,8 @@ import {CartStore} from './cart-store';

+ + + + +Import the signal functions and create your reactive state. This works exactly the same as in components: + +```ts +import {Directive, input, signal, computed} from '@angular/core'; + +@Directive({ + selector: '[highlight]', +}) +export class HighlightDirective { + // Signal inputs - same as components! + color = input('yellow'); + intensity = input(0.3); + + // Internal state - same as components! + private isHovered = signal(false); + + // Computed signals - same as components! + backgroundStyle = computed(() => { + const baseColor = this.color(); + const alpha = this.isHovered() ? this.intensity() : this.intensity() * 0.5; + + const colorMap: Record = { + 'yellow': `rgba(255, 255, 0, ${alpha})`, + 'blue': `rgba(0, 100, 255, ${alpha})`, + 'green': `rgba(0, 200, 0, ${alpha})`, + 'red': `rgba(255, 0, 0, ${alpha})`, + }; + + return colorMap[baseColor] || colorMap['yellow']; + }); +} +``` + +Notice how this is identical to component patterns - the only difference is we're in a `@Directive` instead of `@Component`. + + + +Since directives don't have templates, you'll use signals in **host bindings** to reactively update the host element. Add the `host` configuration and event handlers: + +```ts +@Directive({ + selector: '[highlight]', + host: { + '[style.backgroundColor]': 'backgroundStyle()', + '(mouseenter)': 'onMouseEnter()', + '(mouseleave)': 'onMouseLeave()', + }, +}) +export class HighlightDirective { + // ... signals from previous step ... + + onMouseEnter() { + this.isHovered.set(true); + } + + onMouseLeave() { + this.isHovered.set(false); + } +} +``` + +The host bindings automatically re-evaluate when the signals change - just like template bindings in components! When `isHovered` changes, the `backgroundStyle` computed signal recalculates, and the host binding updates the element's style. + + + +Update the app template to demonstrate the reactive directive: + +```ts +template: ` +

Total: $0

Total Items: {{ cartStore.totalQuantity() }}

Total: \${{ cartStore.totalPrice() }}

Directive with Signals