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

challenge 51: signal effect trigger too often (#855)

Browse Source 
* feat: challenge 51

* fix: permission denied
This commit is contained in:
Laforge Thomas
2024-05-20 13:34:04 +02:00
committed by GitHub
parent a964e4d223
commit edbe7d498c
26 changed files with 362 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/signal/51-function-call-effect/src/app/action.component.ts Normal file
View File

@@ -0,0 +1,45 @@
import {
ChangeDetectionStrategy,
Component,
effect,
inject,
signal,
} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { UserService } from './user.service';
@Component({
standalone: true,
imports: [FormsModule],
selector: 'app-actions',
template: `
<form class="mx-auto max-w-sm">
<label for="actions" class="mb-2 block text-sm font-medium text-gray-900">
Choose an action
</label>
<select
name="actions"
[(ngModel)]="action"
id="actions"
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500">
<option selected>Please select an action</option>
@for (action of actions; track $index) {
<option value="{{ action }}">{{ action }}</option>
}
</select>
</form>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ActionsComponent {
private userService = inject(UserService);
protected action = signal(undefined);
protected actions = ['Create', 'Read', 'Update', 'Delete'];
constructor() {
effect(() => {
this.userService.log(this.action() ?? 'No action selected');
});
}
}

34
apps/signal/51-function-call-effect/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,34 @@
import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ActionsComponent } from './action.component';
import { UserService } from './user.service';
@Component({
standalone: true,
imports: [FormsModule, ActionsComponent],
selector: 'app-root',
template: `
<nav class="flex w-full items-center border border-b">
Profile selected:
<form class="m-4 w-48">
<select
[(ngModel)]="userService.name"
name="name"
class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 ">
<option selected>Please choose an user</option>
@for (user of users; track $index) {
<option value="{{ user }}">{{ user }}</option>
}
</select>
</form>
</nav>
<app-actions />
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {
protected userService = inject(UserService);
protected users = ['Thomas', 'John', 'Alice', 'Bob', 'Charlie', 'David'];
}

5
apps/signal/51-function-call-effect/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,5 @@
import { ApplicationConfig } from '@angular/core';
export const appConfig: ApplicationConfig = {
providers: [],
};

10
apps/signal/51-function-call-effect/src/app/user.service.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Injectable, signal } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class UserService {
name = signal('Thomas');
log(message: string) {
console.log(`${this.name()}: ${message}`);
}
}

0
apps/signal/51-function-call-effect/src/assets/.gitkeep Normal file
View File

BIN
apps/signal/51-function-call-effect/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/signal/51-function-call-effect/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>angular-function-call-effect</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

7
apps/signal/51-function-call-effect/src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);

5
apps/signal/51-function-call-effect/src/styles.scss Normal file
View File

@@ -0,0 +1,5 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* You can add global styles to this file, and also import other style files */