diff --git a/README.md b/README.md
index 9681f1f86..46fafd07a 100644
--- a/README.md
+++ b/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 47 challenges](https://angular-challenges.vercel.app/)
+Check [all 48 challenges](https://angular-challenges.vercel.app/)
## Contributors ✨
diff --git a/apps/angular/pipe-alternative/.eslintrc.json b/apps/angular/pipe-alternative/.eslintrc.json
new file mode 100644
index 000000000..8ebcbfd59
--- /dev/null
+++ b/apps/angular/pipe-alternative/.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": {}
+ }
+ ]
+}
diff --git a/apps/angular/pipe-alternative/README.md b/apps/angular/pipe-alternative/README.md
new file mode 100644
index 000000000..57a9ecec8
--- /dev/null
+++ b/apps/angular/pipe-alternative/README.md
@@ -0,0 +1,13 @@
+# Pipe alternative
+
+> author: sven-brodny
+
+### Run Application
+
+```bash
+npx nx serve angular-pipe-alternative
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/angular/48-pipe-alternative/).
diff --git a/apps/angular/pipe-alternative/project.json b/apps/angular/pipe-alternative/project.json
new file mode 100644
index 000000000..35aea3499
--- /dev/null
+++ b/apps/angular/pipe-alternative/project.json
@@ -0,0 +1,73 @@
+{
+ "name": "angular-pipe-alternative",
+ "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+ "projectType": "application",
+ "prefix": "app",
+ "sourceRoot": "apps/angular/pipe-alternative/src",
+ "tags": [],
+ "targets": {
+ "build": {
+ "executor": "@angular-devkit/build-angular:application",
+ "outputs": ["{options.outputPath}"],
+ "options": {
+ "outputPath": "dist/apps/angular/pipe-alternative",
+ "index": "apps/angular/pipe-alternative/src/index.html",
+ "browser": "apps/angular/pipe-alternative/src/main.ts",
+ "polyfills": ["zone.js"],
+ "tsConfig": "apps/angular/pipe-alternative/tsconfig.app.json",
+ "inlineStyleLanguage": "scss",
+ "assets": [
+ "apps/angular/pipe-alternative/src/favicon.ico",
+ "apps/angular/pipe-alternative/src/assets"
+ ],
+ "styles": ["apps/angular/pipe-alternative/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": "angular-pipe-alternative:build:production"
+ },
+ "development": {
+ "buildTarget": "angular-pipe-alternative:build:development"
+ }
+ },
+ "defaultConfiguration": "development"
+ },
+ "extract-i18n": {
+ "executor": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "buildTarget": "angular-pipe-alternative:build"
+ }
+ },
+ "lint": {
+ "executor": "@nx/eslint:lint",
+ "outputs": ["{options.outputFile}"]
+ }
+ }
+}
diff --git a/apps/angular/pipe-alternative/src/app/app.component.ts b/apps/angular/pipe-alternative/src/app/app.component.ts
new file mode 100644
index 000000000..d977f0989
--- /dev/null
+++ b/apps/angular/pipe-alternative/src/app/app.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+ standalone: true,
+ imports: [],
+ selector: 'app-root',
+ template: ``,
+ styles: [''],
+})
+export class AppComponent {}
diff --git a/apps/angular/pipe-alternative/src/app/app.config.ts b/apps/angular/pipe-alternative/src/app/app.config.ts
new file mode 100644
index 000000000..81a6edde4
--- /dev/null
+++ b/apps/angular/pipe-alternative/src/app/app.config.ts
@@ -0,0 +1,5 @@
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+ providers: [],
+};
diff --git a/apps/angular/pipe-alternative/src/assets/.gitkeep b/apps/angular/pipe-alternative/src/assets/.gitkeep
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/angular/pipe-alternative/src/favicon.ico b/apps/angular/pipe-alternative/src/favicon.ico
new file mode 100644
index 000000000..317ebcb23
Binary files /dev/null and b/apps/angular/pipe-alternative/src/favicon.ico differ
diff --git a/apps/angular/pipe-alternative/src/index.html b/apps/angular/pipe-alternative/src/index.html
new file mode 100644
index 000000000..e9d7699f5
--- /dev/null
+++ b/apps/angular/pipe-alternative/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ angular-pipe-alternative
+
+
+
+
+
+
+
+
diff --git a/apps/angular/pipe-alternative/src/main.ts b/apps/angular/pipe-alternative/src/main.ts
new file mode 100644
index 000000000..f3a7223da
--- /dev/null
+++ b/apps/angular/pipe-alternative/src/main.ts
@@ -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),
+);
diff --git a/apps/angular/pipe-alternative/src/styles.scss b/apps/angular/pipe-alternative/src/styles.scss
new file mode 100644
index 000000000..77e408aa8
--- /dev/null
+++ b/apps/angular/pipe-alternative/src/styles.scss
@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */
diff --git a/apps/angular/pipe-alternative/tailwind.config.js b/apps/angular/pipe-alternative/tailwind.config.js
new file mode 100644
index 000000000..38183db2c
--- /dev/null
+++ b/apps/angular/pipe-alternative/tailwind.config.js
@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+ ...createGlobPatternsForDependencies(__dirname),
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+};
diff --git a/apps/angular/pipe-alternative/tsconfig.app.json b/apps/angular/pipe-alternative/tsconfig.app.json
new file mode 100644
index 000000000..58220429a
--- /dev/null
+++ b/apps/angular/pipe-alternative/tsconfig.app.json
@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../../../dist/out-tsc",
+ "types": []
+ },
+ "files": ["src/main.ts"],
+ "include": ["src/**/*.d.ts"],
+ "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}
diff --git a/apps/angular/pipe-alternative/tsconfig.editor.json b/apps/angular/pipe-alternative/tsconfig.editor.json
new file mode 100644
index 000000000..4ee639340
--- /dev/null
+++ b/apps/angular/pipe-alternative/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+ "extends": "./tsconfig.json",
+ "include": ["src/**/*.ts"],
+ "compilerOptions": {
+ "types": []
+ }
+}
diff --git a/apps/angular/pipe-alternative/tsconfig.json b/apps/angular/pipe-alternative/tsconfig.json
new file mode 100644
index 000000000..db0ec0f25
--- /dev/null
+++ b/apps/angular/pipe-alternative/tsconfig.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "target": "es2022",
+ "useDefineForClassFields": false,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "strict": true,
+ "noImplicitOverride": true,
+ "noPropertyAccessFromIndexSignature": true,
+ "noImplicitReturns": true,
+ "noFallthroughCasesInSwitch": true,
+ },
+ "files": [],
+ "include": [],
+ "references": [
+ {
+ "path": "./tsconfig.app.json",
+ },
+ {
+ "path": "./tsconfig.editor.json",
+ },
+ ],
+ "extends": "../../../tsconfig.base.json",
+ "angularCompilerOptions": {
+ "enableI18nLegacyMessageIdFormat": false,
+ "strictInjectionParameters": true,
+ "strictInputAccessModifiers": true,
+ "strictTemplates": true,
+ },
+}
diff --git a/challenge-number.json b/challenge-number.json
index fee6a9627..20708f318 100644
--- a/challenge-number.json
+++ b/challenge-number.json
@@ -1,6 +1,6 @@
{
- "total": 47,
+ "total": 48,
"🟢": 18,
"🟠": 120,
- "🔴": 209
+ "🔴": 210
}
diff --git a/docs/src/content/docs/challenges/angular/48-pipe-alternative.md b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md
new file mode 100644
index 000000000..f1b611593
--- /dev/null
+++ b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md
@@ -0,0 +1,44 @@
+---
+title: 🔴 Pipe alternative
+description: Challenge 48 is about an alternative to angulars pipe
+author: sven-brodny
+contributors:
+ - tomalaforge
+ - svenson95
+challengeNumber: 48
+command: angular-pipe-alternative
+sidebar:
+ order: 210
+ badge: New
+---
+
+## Information
+
+This is the fourth and last of four `@Pipe()` challenges, the goal of this series is to master pipes in Angular. But this part isn’t really about pipes, but it’ll help to better understand the concept of pipes.
+
+For those who crave for maximum performance. And less boilerplate.
+
+
+
+A self written memo function is another option for replacing function calls template's. The memo function will help you in cases when you call functions and pass the same value to it, and not use it with different parameters - that will break the “cache” of the memo function.
+
+:::note
+The memo function will cache stuff per instance, and not per usage.
+:::
+
+If the parameters have changed, we call the function again with the new parameters and save its result, and if not, we return the old value. This is an improvement because we can avoid boilerplate and use a JavaScript way of handling this issue.
+
+
+
+## Conclusion
+
+This `memo` function is pretty nice, but the pipe-way provides more decomposition. So maybe we should keep using `Pipe`s instead create functions in the components for this purpose. My personal conclusion is …
+
+- a `memo` function can improve the code readability, so i’ll use it if the function is very simple.
+- a `Pipe` provides more decomposition, so I’ll use it if the function is more complex.
+
+Feel free to leave your feedback in the comments.
+
+## Statement
+
+- The project manager decides to implement a `memo` function to replace some unnecessary function calls in templates. Refactor the `getDateString()` function with a memo function, checkout this [article](https://itnext.io/its-ok-to-use-function-calls-in-angular-templates-ffdd12b0789e)
diff --git a/docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md b/docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md
index d1f853ab4..4614caa98 100644
--- a/docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md
+++ b/docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md
@@ -9,7 +9,6 @@ challengeNumber: 47
command: typescript-enums-vs-union-types
sidebar:
order: 18
- badge: New
---
## Information
diff --git a/docs/src/content/docs/es/index.mdx b/docs/src/content/docs/es/index.mdx
index f6b752cfb..bf064a76b 100644
--- a/docs/src/content/docs/es/index.mdx
+++ b/docs/src/content/docs/es/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir al Desafío más reciente
- link: /es/challenges/typescript/47-enums-vs-union-types/
+ link: /es/challenges/angular/48-pipe-alternative/
icon: rocket
- text: Dar una estrella
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
-
- Este repositorio contiene 47 Desafíos relacionados con Angular, Nx, RxJS, Ngrx y Typescript.
+
+ Este repositorio contiene 48 Desafíos relacionados con Angular, Nx, RxJS, Ngrx y Typescript.
Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx
index c16bc02f8..08f9f13f1 100644
--- a/docs/src/content/docs/fr/index.mdx
+++ b/docs/src/content/docs/fr/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Aller au dernier Challenge
- link: /fr/challenges/typescript/47-enums-vs-union-types/
+ link: /fr/challenges/angular/48-pipe-alternative/
icon: rocket
- text: Donne une étoile
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
-
- Ce répertoire rassemble 47 Défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+
+ Ce répertoire rassemble 48 Défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index f95e45202..1808b64c7 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -27,8 +27,8 @@ import MyIcon from '../../components/MyIcon.astro';
import SubscriptionForm from '../../components/SubscriptionForm.astro';
-
- This repository gathers 47 Challenges related to Angular, Nx, RxJS, Ngrx and Typescript.
+
+ This repository gathers 48 Challenges related to Angular, Nx, RxJS, Ngrx and Typescript.
These challenges resolve around real-life issues or specific features to elevate your skills.
diff --git a/docs/src/content/docs/pt/index.mdx b/docs/src/content/docs/pt/index.mdx
index 068c538a0..11bb2d639 100644
--- a/docs/src/content/docs/pt/index.mdx
+++ b/docs/src/content/docs/pt/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir para o desafio mais recente
- link: /pt/challenges/typescript/47-enums-vs-union-types/
+ link: /pt/challenges/angular/48-pipe-alternative/
icon: rocket
- text: Dar uma estrela
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
-
- Este repositório possui 47 Desafios relacionados a Angular, Nx, RxJS,
+
+ Este repositório possui 48 Desafios relacionados a Angular, Nx, RxJS,
Ngrx e Typescript.
Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
melhorar suas habilidades.
diff --git a/docs/src/content/docs/ru/index.mdx b/docs/src/content/docs/ru/index.mdx
index 35fe566c4..35a225cb1 100644
--- a/docs/src/content/docs/ru/index.mdx
+++ b/docs/src/content/docs/ru/index.mdx
@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Перейти к последней задаче
- link: /ru/challenges/typescript/47-enums-vs-union-types/
+ link: /ru/challenges/angular/48-pipe-alternative/
icon: rocket
- text: Добавить звезду
link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
import SubscriptionForm from '../../../components/SubscriptionForm.astro';
-
- Этот репозиторий содержит 47 Испытания, связанных с Angular, Nx, RxJS, Ngrx and Typescript.
+
+ Этот репозиторий содержит 48 Испытания, связанных с Angular, Nx, RxJS, Ngrx and Typescript.
Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас.