From 5de94bb217d75a936deb03275d4e48d59543a01f Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Thu, 28 Mar 2024 22:07:44 +0100 Subject: [PATCH 1/4] feat: challenge 48 Pipe alternative --- README.md | 2 +- apps/angular/pipe-alternative/.eslintrc.json | 36 +++++++++ apps/angular/pipe-alternative/README.md | 13 ++++ apps/angular/pipe-alternative/project.json | 73 ++++++++++++++++++ .../pipe-alternative/src/app/app.component.ts | 10 +++ .../pipe-alternative/src/app/app.config.ts | 5 ++ .../pipe-alternative/src/assets/.gitkeep | 0 apps/angular/pipe-alternative/src/favicon.ico | Bin 0 -> 15086 bytes apps/angular/pipe-alternative/src/index.html | 13 ++++ apps/angular/pipe-alternative/src/main.ts | 7 ++ apps/angular/pipe-alternative/src/styles.scss | 5 ++ .../pipe-alternative/tailwind.config.js | 14 ++++ .../pipe-alternative/tsconfig.app.json | 10 +++ .../pipe-alternative/tsconfig.editor.json | 7 ++ apps/angular/pipe-alternative/tsconfig.json | 30 +++++++ challenge-number.json | 4 +- .../challenges/angular/48-pipe-alternative.md | 44 +++++++++++ .../typescript/47-enums-vs-union-types.md | 1 - docs/src/content/docs/es/index.mdx | 6 +- docs/src/content/docs/fr/index.mdx | 6 +- docs/src/content/docs/index.mdx | 4 +- docs/src/content/docs/pt/index.mdx | 6 +- docs/src/content/docs/ru/index.mdx | 6 +- 23 files changed, 284 insertions(+), 18 deletions(-) create mode 100644 apps/angular/pipe-alternative/.eslintrc.json create mode 100644 apps/angular/pipe-alternative/README.md create mode 100644 apps/angular/pipe-alternative/project.json create mode 100644 apps/angular/pipe-alternative/src/app/app.component.ts create mode 100644 apps/angular/pipe-alternative/src/app/app.config.ts create mode 100644 apps/angular/pipe-alternative/src/assets/.gitkeep create mode 100644 apps/angular/pipe-alternative/src/favicon.ico create mode 100644 apps/angular/pipe-alternative/src/index.html create mode 100644 apps/angular/pipe-alternative/src/main.ts create mode 100644 apps/angular/pipe-alternative/src/styles.scss create mode 100644 apps/angular/pipe-alternative/tailwind.config.js create mode 100644 apps/angular/pipe-alternative/tsconfig.app.json create mode 100644 apps/angular/pipe-alternative/tsconfig.editor.json create mode 100644 apps/angular/pipe-alternative/tsconfig.json create mode 100644 docs/src/content/docs/challenges/angular/48-pipe-alternative.md 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 0000000000000000000000000000000000000000..317ebcb2336e0833a22dddf0ab287849f26fda57 GIT binary patch literal 15086 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 + + + + 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..d341d4f7e --- /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. + +https://giphy.com/gifs/h24Y1pZIGKXzG + +A self written memo function is another option to using function calls in the template or `Pipe`’s. The memo function will help you in cases when you call functions in the template and pass the same value to it, and not use it with different parameters - that will break the “cache” of the memo function. + +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. + +img + +## 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 pipes. Refactor the `PluralPipe` to a memo function with the help of this [article](https://itnext.io/its-ok-to-use-function-calls-in-angular-templates-ffdd12b0789e) + +:::note +Do you already know the [PluralPipe](https://angular.io/api/common/I18nPluralPipe)? It’s a cool way of pluralize values. +::: 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. Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас. From 90e2c2d6eeee9f7b126415e2a82b201168703675 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Thu, 28 Mar 2024 22:21:21 +0100 Subject: [PATCH 2/4] docs(pipe-alternative): update content --- docs/src/content/docs/challenges/angular/48-pipe-alternative.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/content/docs/challenges/angular/48-pipe-alternative.md b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md index d341d4f7e..b619d9158 100644 --- a/docs/src/content/docs/challenges/angular/48-pipe-alternative.md +++ b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md @@ -37,7 +37,7 @@ Feel free to leave your feedback in the comments. ## Statement -- The project manager decides to implement a `memo` function to replace some unnecessary pipes. Refactor the `PluralPipe` to a memo function with the help of this [article](https://itnext.io/its-ok-to-use-function-calls-in-angular-templates-ffdd12b0789e) +- 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) :::note Do you already know the [PluralPipe](https://angular.io/api/common/I18nPluralPipe)? It’s a cool way of pluralize values. From 4af325253e3fadb982badc50869defdc8d7ba4a8 Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Thu, 28 Mar 2024 22:23:37 +0100 Subject: [PATCH 3/4] docs(pipe-alternative): add images --- .../content/docs/challenges/angular/48-pipe-alternative.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/48-pipe-alternative.md b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md index b619d9158..4119e8698 100644 --- a/docs/src/content/docs/challenges/angular/48-pipe-alternative.md +++ b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md @@ -16,7 +16,7 @@ sidebar: 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. -https://giphy.com/gifs/h24Y1pZIGKXzG +![giphy](https://github.com/svenson95/angular-challenges/assets/46655156/234bc9d3-70bc-4424-9bc6-065ea96ddd79) A self written memo function is another option to using function calls in the template or `Pipe`’s. The memo function will help you in cases when you call functions in the template and pass the same value to it, and not use it with different parameters - that will break the “cache” of the memo function. @@ -24,7 +24,7 @@ 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. -img +Functions in Template - 1 ## Conclusion From 00b2629c687fd71fd3df333532d59a620240792d Mon Sep 17 00:00:00 2001 From: Sven Brodny Date: Thu, 28 Mar 2024 22:35:17 +0100 Subject: [PATCH 4/4] docs(pipe-alternative): update content --- .../docs/challenges/angular/48-pipe-alternative.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/src/content/docs/challenges/angular/48-pipe-alternative.md b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md index b619d9158..0a4bc7143 100644 --- a/docs/src/content/docs/challenges/angular/48-pipe-alternative.md +++ b/docs/src/content/docs/challenges/angular/48-pipe-alternative.md @@ -14,13 +14,17 @@ sidebar: ## 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. +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. https://giphy.com/gifs/h24Y1pZIGKXzG -A self written memo function is another option to using function calls in the template or `Pipe`’s. The memo function will help you in cases when you call functions in the template and pass the same value to it, and not use it with different parameters - that will break the “cache” of the memo function. +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. @@ -38,7 +42,3 @@ 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) - -:::note -Do you already know the [PluralPipe](https://angular.io/api/common/I18nPluralPipe)? It’s a cool way of pluralize values. -:::