diff --git a/apps/angular/bug-effect-signal/src/app/app.component.ts b/apps/angular/bug-effect-signal/src/app/app.component.ts index 55c9c79..80861ed 100644 --- a/apps/angular/bug-effect-signal/src/app/app.component.ts +++ b/apps/angular/bug-effect-signal/src/app/app.component.ts @@ -11,25 +11,42 @@ import { FormsModule } from '@angular/forms'; imports: [FormsModule], selector: 'app-root', template: ` - Show Dialog if one checkbox is checked - - Name - - Age - - Address +
+

MacBook

+

1999,99 €

+
+ +
+

Extras:

+ +
+ + +500 GB drive-space +
+
+ + +4 GB RAM +
+
+ + Better GPU +
+
`, changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppComponent { - name = model(false); - age = model(false); - address = model(false); + drive = model(false); + ram = model(false); + gpu = model(false); constructor() { + /* + Explain for your junior team mate why this bug occurs ... + */ effect(() => { - if (this.name() || this.age() || this.address()) { - alert('Checkbox was checked'); + if (this.drive() || this.ram() || this.gpu()) { + alert('Price increased!'); } }); } diff --git a/apps/angular/bug-effect-signal/src/index.html b/apps/angular/bug-effect-signal/src/index.html index d43c416..caa8b1e 100644 --- a/apps/angular/bug-effect-signal/src/index.html +++ b/apps/angular/bug-effect-signal/src/index.html @@ -8,6 +8,6 @@ - + diff --git a/docs/src/content/docs/challenges/angular/50-bug-effect-signal.md b/docs/src/content/docs/challenges/angular/50-bug-effect-signal.md index e0de7ac..add1610 100644 --- a/docs/src/content/docs/challenges/angular/50-bug-effect-signal.md +++ b/docs/src/content/docs/challenges/angular/50-bug-effect-signal.md @@ -4,6 +4,7 @@ description: Challenge 50 is about understanding why an effect is not triggered. author: thomas-laforge contributors: - tomalaforge + - svenson95 challengeNumber: 50 command: angular-bug-effect-signal sidebar: @@ -13,10 +14,27 @@ sidebar: ## Information -In this basic exercise, we aim to display an alert whenever at least one checkbox is checked. +In this basic exercise, we aim to display an alert whenever at least one checkbox is checked. You are in the process of buying a MacBook, which can be upgraded with some extras, like more drive space, more RAM or a better GPU. + +Bildschirmfoto 2024-05-09 um 08 57 57 ## Statement -The alert correctly triggers when clicking on each checkbox separately. However, if you first click on one checkbox and then click on a second one, the alert fails to appear. Why does this happen? +The actual implementation doesn't work as expected, your task is to fix the issue. Your team exposed a bug, there is a alert to be shown if atleast one of the three checkboxes is checked. But if the first one is checked, the other two checkboxes gets checked without displaying the alert. Why does this happen? -The objective of this challenge is to understand and correct the issue preventing the alert from appearing when the second checkbox is clicked. +The objective of this challenge is to understand the issue and fix the problem, preventing the alert from appearing when the second checkbox is clicked. + +## Acceptance Criteria + +To ensure this feature works properly, try this out to reproduce the bug after solving the challenge, to check if the bug is gone. + +- Check box 1 (Alert should be shown) +- Check box 2 (Alert should be shown) +- Uncheck box 1 +- Check box 3 (Alert should be shown) +- Uncheck box 2 +- Uncheck box 3 + +## Bonus Challenge + +- Try to implement this feature with a `computed` signal.