vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-10 12:53:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(c50): update challenge example (#868)

Browse Source 
* feat(c50): update challenge example

* feat(c50): add challenge image

* feat(c50): update docs

* feat(c50): update docs content
This commit is contained in:
Sven Brodny
2024-05-15 14:37:30 +02:00
committed by GitHub
parent 008051cab8
commit 60c9964a9e
3 changed files with 51 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/angular/bug-effect-signal/src/app/app.component.ts
View File

@@ -11,25 +11,42 @@ import { FormsModule } from '@angular/forms';
imports: [FormsModule],
selector: 'app-root',
template: `
Show Dialog if one checkbox is checked
<input type="checkbox" [(ngModel)]="name" />
Name
<input type="checkbox" [(ngModel)]="age" />
Age
<input type="checkbox" [(ngModel)]="address" />
Address
<section class="flex gap-5">
<p>MacBook</p>
<p>1999,99 €</p>
</section>
<section>
<p>Extras:</p>
<div>
<input type="checkbox" [(ngModel)]="drive" />
+500 GB drive-space
</div>
<div>
<input type="checkbox" [(ngModel)]="ram" />
+4 GB RAM
</div>
<div>
<input type="checkbox" [(ngModel)]="gpu" />
Better GPU
</div>
</section>
`,
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!');
}
});
}

2
apps/angular/bug-effect-signal/src/index.html
View File

@@ -8,6 +8,6 @@
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
<app-root class="flex flex-col gap-5 p-10"></app-root>
</body>
</html>

24
docs/src/content/docs/challenges/angular/50-bug-effect-signal.md
View File

@@ -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.
<img width="889" alt="Bildschirmfoto 2024-05-09 um 08 57 57" src="https://github.com/svenson95/angular-challenges/assets/46655156/d78f42a5-9064-4a33-bb8c-c0433bd6966d">
## 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.