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>