diff --git a/content/components/minimize-logic-in-templates.md b/content/components/minimize-logic-in-templates.md
index b6c168b..898c9ca 100644
--- a/content/components/minimize-logic-in-templates.md
+++ b/content/components/minimize-logic-in-templates.md
@@ -8,38 +8,42 @@ When we put too much logic in our templates, we are making our applications more
In addition, too much logic inside the template makes them less readable. We cannot take a quick glance at the template and quickly understand what's going on.
-# Solution
-
-Try to avoid putting too much logic in your templates.
-
-For example here, we have have an `*ngIf` that has too much logic.
+For example here, we have have an `@if` that has too much logic.
```ts
@Component({
- template: `
1 && visible">content to show
`,
+ template: `
+ @if(users().length && !users().some(user => user.criteriaMet)) {
+ No items meet the criteria.
+ }
+ `,
})
export class SomeComponent {
- users: User[];
- visible: boolean;
+ users: signal([]);
}
```
-We can refactor this by extracting the logic into the component's class. This will make the template more readable and the logic easier to test.
+# Solution
+
+Let's refactor this by extracting the logic into the component's class. This will make the template more readable and the logic easier to test.
+To do so, we use `computed`, introduced in Angular 16, to create a computed property that will be used in the template.
```ts
@Component({
- template: `content to show
`,
+ template: `
+ @if(noCriteriaMet()) {
+ No items meet the criteria.
+ }
+ `,
})
export class SomeComponent {
- users: User[];
- visible: boolean;
-
- usersExistsAndVisible() {
- return this.users && this.users.length > 1 && this.visible;
- }
+ users: signal([]);
+
+ noCriteriaMet = computed(() => this.users().length && !this.users().some(user => user.criteriaMet));
}
```
### Best Practices
-Be careful when the `ChangeDetectionStrategy` is set to `Default`, as it'd cause the functions bound in the template to be called each time the `Change Detection Cycle` runs. You can optimize this by turning on the `OnPush` change detection strategy and leverage the `async` pipe in combination with `Observables` that return the desired value.
+Be careful when the `ChangeDetectionStrategy` is set to `Default`, as it'd cause the functions bound in the template to be called each time the `Change Detection Cycle` runs.
+You can optimize this by turning on the `OnPush` change detection strategy and leverage the `async` pipe in combination with `Observables` that return the desired value.