From 56295b730704121c2c6734920136e7e167569494 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Mon, 23 Mar 2020 21:08:44 +0300 Subject: [PATCH 1/4] docs(core): add how to create TrackByFunction using TrackByService --- docs/en/UI/Angular/Track-By-Service.md | 114 +++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 docs/en/UI/Angular/Track-By-Service.md diff --git a/docs/en/UI/Angular/Track-By-Service.md b/docs/en/UI/Angular/Track-By-Service.md new file mode 100644 index 0000000000..4b8d2d8a1e --- /dev/null +++ b/docs/en/UI/Angular/Track-By-Service.md @@ -0,0 +1,114 @@ +# Easy TrackByFunction Implementation + +`TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose. + + + +## Getting Started + +You do not have to provide the `TrackByService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components. For better type support, you may pass in the type of the iterated item to it. + +```js +import { TrackByService } from '@abp/ng.core'; + +@Component({ + /* class metadata here */ +}) +class DemoComponent { + list: Item[]; + + constructor(public readonly track: TrackByService) {} +} +``` + + + +> Noticed `track` is `public` and `readonly`? That is because we will see some examples where methods of `TrackByService` instance are directly called in the component's template. That may be considered as an anti-pattern, but it has its own advantage, especially when component inheritance is leveraged. You can always use public component properties instead. + + + +**The members are also exported as separate functions.** If you do not want to inject `TrackByService`, you can always import and use those functions directly in your classes. + + + +## Usage + +There are two approaches available. + +1. You may inject `TrackByService` to your component and use its members. +2. You may use exported higher-order functions directly on component properties. + + + +### How to Track Items by a Key + +You can use `by` to get a `TrackByFunction` that tracks the iterated object based on one of its keys. For type support, you may pass in the type of the iterated item to it. + +```html + + +
{{ item.name }}
+``` + + + +`by` is exported as a stand-alone function and is named `trackBy`. + +```js +import { trackBy } from "@abp/ng.core"; + +@Component({ + template: ` +
+ {{ item.name }} +
+ `, +}) +class DemoComponent { + list: Item[]; + + trackById = trackBy('id'); +} +``` + + + +### How to Track by a Deeply Nested Key + +You can use `byDeep` to get a `TrackByFunction` that tracks the iterated object based on a deeply nested key. For type support, you may pass in the type of the iterated item to it. + +```html + + +
+ {{ item.tenant.name }} +
+``` + + + +`byDeep` is exported as a stand-alone function and is named `trackByDeep`. + +```js +import { trackByDeep } from "@abp/ng.core"; + +@Component({ + template: ` +
+ {{ item.name }} +
+ `, +}) +class DemoComponent { + list: Item[]; + + trackByTenantAccountId = trackByDeep('tenant', 'account', 'id'); +} +``` + From a709c4ff8b30f1bc067d2065418da90b2b20fb9e Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 24 Mar 2020 10:42:06 +0300 Subject: [PATCH 2/4] docs: escape curly braces --- docs/en/UI/Angular/Track-By-Service.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/en/UI/Angular/Track-By-Service.md b/docs/en/UI/Angular/Track-By-Service.md index 4b8d2d8a1e..4506f77e47 100644 --- a/docs/en/UI/Angular/Track-By-Service.md +++ b/docs/en/UI/Angular/Track-By-Service.md @@ -47,7 +47,7 @@ You can use `by` to get a `TrackByFunction` that tracks the iterated object base ```html -
{{ item.name }}
+
{%{{{ item.name }}}%}
``` @@ -62,7 +62,7 @@ import { trackBy } from "@abp/ng.core";
- {{ item.name }} + {%{{{ item.name }}}%}
`, }) @@ -85,7 +85,7 @@ You can use `byDeep` to get a `TrackByFunction` that tracks the iterated object
- {{ item.tenant.name }} + {%{{{ item.tenant.name }}}%}
``` @@ -101,7 +101,7 @@ import { trackByDeep } from "@abp/ng.core";
- {{ item.name }} + {%{{{ item.name }}}%}
`, }) From 90c37f2019dfa3357893f49e9ffa4fd4ea50f428 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 24 Mar 2020 10:42:20 +0300 Subject: [PATCH 3/4] docs: add what's next to custom setting page document --- docs/en/UI/Angular/Custom-Setting-Page.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/en/UI/Angular/Custom-Setting-Page.md b/docs/en/UI/Angular/Custom-Setting-Page.md index 7c51cf2cca..6aa5d8a3cc 100644 --- a/docs/en/UI/Angular/Custom-Setting-Page.md +++ b/docs/en/UI/Angular/Custom-Setting-Page.md @@ -40,3 +40,7 @@ ngOnInit() { Navigate to `/setting-management` route to see the changes: ![Custom Settings Tab](./images/custom-settings.png) + +## What's Next? + +- [TrackByService](./Track-By-Service.md) From df898213f34cbad9b9bfaa34aa24deeb6a4340f0 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 24 Mar 2020 10:42:36 +0300 Subject: [PATCH 4/4] docs: add TrackByService to the menu --- docs/en/docs-nav.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index a96fb911d2..425b8c526a 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -335,6 +335,10 @@ { "text": "Custom Setting Page", "path": "UI/Angular/Custom-Setting-Page.md" + }, + { + "text": "TrackByService", + "path": "UI/Angular/Track-By-Service.md" } ] }