diff --git a/adev/src/content/tutorials/playground/3-minigame/src/main.ts b/adev/src/content/tutorials/playground/3-minigame/src/main.ts
index 9baed226862..b1f1c013325 100644
--- a/adev/src/content/tutorials/playground/3-minigame/src/main.ts
+++ b/adev/src/content/tutorials/playground/3-minigame/src/main.ts
@@ -1,6 +1,13 @@
import {A11yModule} from '@angular/cdk/a11y';
-import {CommonModule} from '@angular/common';
-import {Component, ElementRef, ViewChild, computed, signal} from '@angular/core';
+import {DecimalPipe} from '@angular/common';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ ElementRef,
+ computed,
+ signal,
+ viewChild,
+} from '@angular/core';
import {MatSlideToggleChange, MatSlideToggleModule} from '@angular/material/slide-toggle';
import {bootstrapApplication} from '@angular/platform-browser';
@@ -52,9 +59,10 @@ function getResultQuote(accuracy: number) {
@Component({
selector: 'app-root',
- imports: [CommonModule, MatSlideToggleModule, A11yModule],
+ imports: [DecimalPipe, MatSlideToggleModule, A11yModule],
styleUrl: 'game.css',
templateUrl: 'game.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Playground {
protected readonly isGuessModalOpen = signal(false);
@@ -75,7 +83,7 @@ export class Playground {
quote: "Hi, I'm NG the Angle!",
};
- @ViewChild('staticArrow') staticArrow!: ElementRef;
+ staticArrow = viewChild.required
>('staticArrow');
protected readonly totalAccuracyPercentage = computed(() => {
const {level, totalAccuracy} = this.gameStats();
@@ -100,6 +108,12 @@ export class Playground {
return this.currentInteractions;
});
+ protected readonly rotation = computed(() => `rotate(${this.rotateVal()}deg)`);
+
+ protected readonly indicatorStyle = computed(() => 0.487 * this.rotateVal() - 179.5);
+
+ protected readonly indicatorRotation = computed(() => `rotate(${253 + this.rotateVal()}deg)`);
+
constructor() {
this.resetGame();
}
@@ -109,18 +123,6 @@ export class Playground {
this.rotateVal.set(40);
}
- getRotation() {
- return `rotate(${this.rotateVal()}deg)`;
- }
-
- getIndicatorStyle() {
- return 0.487 * this.rotateVal() - 179.5;
- }
-
- getIndicatorRotation() {
- return `rotate(${253 + this.rotateVal()}deg)`;
- }
-
mouseDown() {
this.isDragging = true;
}
@@ -133,8 +135,8 @@ export class Playground {
const vh30 = 0.3 * document.documentElement.clientHeight;
if (!this.isDragging) return;
- let pointX = e.pageX - (this.staticArrow.nativeElement.offsetLeft + 2.5);
- let pointY = e.pageY - (this.staticArrow.nativeElement.offsetTop + vh30);
+ let pointX = e.pageX - (this.staticArrow().nativeElement.offsetLeft + 2.5);
+ let pointY = e.pageY - (this.staticArrow().nativeElement.offsetTop + vh30);
let calculatedAngle = 0;
if (pointX >= 0 && pointY < 0) {
diff --git a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
index e0a5bc5cf07..8305008d1e5 100644
--- a/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
+++ b/adev/src/content/tutorials/signals/steps/2-deriving-state-with-computed-signals/README.md
@@ -68,7 +68,7 @@ The template already has placeholders showing "Loading...". Replace them with yo
1. For notifications, replace `Loading...` with an @if block:
-```html
+```angular-html
@if (notificationsEnabled()) {
Enabled
} @else {
@@ -78,13 +78,13 @@ The template already has placeholders showing "Loading...". Replace them with yo
2. For the message, replace `Loading...` with:
-```html
+```angular-html
{{ statusMessage() }}
```
3. For working hours, replace `Loading...` with an @if block:
-```html
+```angular-html
@if (isWithinWorkingHours()) {
Yes
} @else {
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 5623d00ed35..f1980a4063a 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
@@ -50,7 +50,7 @@ This is the key difference: computed signals are read-only, but linked signals c
Update your template to add a toggle button for notifications:
-```html
+```angular-html
Notifications:
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
index 93a79e4e66f..da3a520b60e 100644
--- 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
@@ -75,7 +75,7 @@ Part 1. **Add click handlers to the buttons:**
Part 2. **Replace the placeholder with resource state handling:**
-```html
+```angular-html
@if (isLoading()) {
Loading user...
} @else if (hasError()) {
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 528af3b1b34..172af2ec822 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
@@ -27,7 +27,7 @@ Notice how `input.required()` creates an input that must be provided, while `inp
Update the template in `product-card` to display the signal input values.
-```html
+```angular-html
{{ name() }}
\${{ price() }}
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
index d68cdee85f2..960e462f37a 100644
--- 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
@@ -83,7 +83,7 @@ Part 1. **Uncomment the checkboxes and add two-way binding:**
Part 2. **Replace the `???` placeholders with @if blocks:**
-```html
+```angular-html
@if (agreedToTerms()) {
Yes
} @else {
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
index 6d6c5541263..15cc2268338 100644
--- 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
@@ -60,7 +60,7 @@ These methods read the current cart state using `cartItems()` and update quantit
Update the main app component in `app.ts` to use the cart service and display the cart component.
-```ts
+```angular-ts
import {Component, inject} from '@angular/core';
import {CartStore} from './cart-store';
import {CartDisplay} from './cart-display';
diff --git a/adev/src/content/tutorials/signals/steps/7-using-signals-with-services/answer/src/app/app.ts b/adev/src/content/tutorials/signals/steps/7-using-signals-with-services/answer/src/app/app.ts
index 966a8fcc36b..e48b2d64725 100644
--- a/adev/src/content/tutorials/signals/steps/7-using-signals-with-services/answer/src/app/app.ts
+++ b/adev/src/content/tutorials/signals/steps/7-using-signals-with-services/answer/src/app/app.ts
@@ -15,7 +15,7 @@ import {CartDisplay} from './cart-display';
-
+
`,
diff --git a/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md b/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
index aae2a5d690f..5f6dba3abc3 100644
--- a/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
+++ b/adev/src/content/tutorials/signals/steps/8-using-signals-with-directives/README.md
@@ -76,7 +76,7 @@ The host bindings automatically re-evaluate when the signals change - just like
Update the app template to demonstrate the reactive directive:
-```ts
+```angular-ts
template: `
Directive with Signals
