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

* feat: challenge 51 * fix: permission denied

Author: tomalaforge

README.md

@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 
 ## Challenges
 
-Check [all 50 challenges](https://angular-challenges.vercel.app/)
+Check [all 51 challenges](https://angular-challenges.vercel.app/)
 
 ## Contributors ✨
 

apps/signal/51-function-call-effect/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+ "extends": ["../../../.eslintrc.json"],
+ "ignorePatterns": ["!**/*"],
+ "overrides": [
+ {
+ "files": ["*.ts"],
+ "extends": [
+ "plugin:@nx/angular",
+ "plugin:@angular-eslint/template/process-inline-templates"
+ ],
+ "rules": {
+ "@angular-eslint/directive-selector": [
+ "error",
+ {
+ "type": "attribute",
+ "prefix": "app",
+ "style": "camelCase"
+ }
+ ],
+ "@angular-eslint/component-selector": [
+ "error",
+ {
+ "type": "element",
+ "prefix": "app",
+ "style": "kebab-case"
+ }
+ ]
+ }
+ },
+ {
+ "files": ["*.html"],
+ "extends": ["plugin:@nx/angular-template"],
+ "rules": {}
+ }
+ ]
+}

apps/signal/51-function-call-effect/README.md

@@ -0,0 +1,13 @@
+# Function call in effect
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve signal-function-call-effect
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/51-function-call-effect/).

apps/signal/51-function-call-effect/project.json

@@ -0,0 +1,72 @@
+{
+ "name": "signal-function-call-effect",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/signal/51-function-call-effect/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/signal/51-function-call-effect",
+ "index": "apps/signal/51-function-call-effect/src/index.html",
+ "browser": "apps/signal/51-function-call-effect/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/signal/51-function-call-effect/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/signal/51-function-call-effect/src/favicon.ico",
+ "apps/signal/51-function-call-effect/src/assets"
+ ],
+ "styles": ["apps/signal/51-function-call-effect/src/styles.scss"],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "500kb",
+ "maximumError": "1mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "2kb",
+ "maximumError": "4kb"
+ }
+ ],
+ "outputHashing": "all"
+ },
+ "development": {
+ "optimization": false,
+ "extractLicenses": false,
+ "sourceMap": true
+ }
+ },
+ "defaultConfiguration": "production"
+ },
+ "serve": {
+ "executor": "@angular-devkit/build-angular:dev-server",
+ "configurations": {
+ "production": {
+ "buildTarget": "signal-function-call-effect:build:production"
+ },
+ "development": {
+ "buildTarget": "signal-function-call-effect:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "signal-function-call-effect:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint"
+ }
+ }
+}

apps/signal/51-function-call-effect/src/app/action.component.ts

@@ -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');
+ });
+ }
+}

apps/signal/51-function-call-effect/src/app/app.component.ts

@@ -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'];
+}

apps/signal/51-function-call-effect/src/app/app.config.ts

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

apps/signal/51-function-call-effect/src/app/user.service.ts

@@ -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}`);
+ }
+}