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: `
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.