From bb842815824c12282ac004f17c54bc3e72513f4c Mon Sep 17 00:00:00 2001
From: Edouard Bozon <bozonedouard@gmail.com>
Date: Tue, 24 Oct 2023 12:00:10 +0200
Subject: [PATCH] refactor: use HostBinding

---
 .../todo-mvc/src/app/todo-list.component.ts    | 18 +++++++++---------
 projects/todo-mvc/src/app/todo.component.ts    | 18 +++++++++++-------
 2 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/projects/todo-mvc/src/app/todo-list.component.ts b/projects/todo-mvc/src/app/todo-list.component.ts
index 03716e8..c8945b4 100644
--- a/projects/todo-mvc/src/app/todo-list.component.ts
+++ b/projects/todo-mvc/src/app/todo-list.component.ts
@@ -1,4 +1,9 @@
-import { ChangeDetectionStrategy, Component, HostBinding, inject } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  inject,
+} from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RxLet } from '@rx-angular/template/let';
 import { TodoComponent } from './todo.component';
@@ -8,11 +13,7 @@ import { TodoService } from './todo.service';
   standalone: true,
   selector: 'app-todo-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    ReactiveFormsModule,
-    RxLet,
-    TodoComponent,
-  ],
+  imports: [ReactiveFormsModule, RxLet, TodoComponent],
   providers: [TodoService],
   styles: [
     `
@@ -40,17 +41,16 @@ import { TodoService } from './todo.service';
         (click)="todoService.actions.toggleAll()"
       />
       <label for="toggle-all">Mark all as complete</label>
-      <ng-container *rxLet="todoService.filteredTodos$; let todos">
+      <section class="todo-list" *rxLet="todoService.filteredTodos$; let todos">
         @for (todo of todos; track todo.id; let i = $index) {
           <app-todo
-            class="todo-list"
             [attr.data-uf]="'todo-' + i"
             [todo]="todo"
             (update)="todoService.actions.update($event)"
             (remove)="todoService.actions.remove($event)"
           />
         }
-      </ng-container>
+      </section>
     </section>
     <footer class="footer" *rxLet="todoService.filter$; let filter">
       <span class="todo-count">
diff --git a/projects/todo-mvc/src/app/todo.component.ts b/projects/todo-mvc/src/app/todo.component.ts
index eaa6684..563d5b1 100644
--- a/projects/todo-mvc/src/app/todo.component.ts
+++ b/projects/todo-mvc/src/app/todo.component.ts
@@ -3,6 +3,7 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  HostBinding,
   Input,
   Output,
   ViewChild,
@@ -20,11 +21,7 @@ import { Todo } from './todo.service';
   selector: 'app-todo',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <article
-      class="todo"
-      [class]="{ completed: todo.done, editing: isEditing }"
-    >
-      @if (isEditing) {
+    @if (isEditing) {
       <input
         #input
         class="edit"
@@ -44,8 +41,7 @@ import { Todo } from './todo.service';
         <label (dblclick)="edit()">{{ todo.text }}</label>
         <button class="destroy" (click)="destroy()"></button>
       </div>
-      }
-    </article>
+    }
   `,
 })
 export class TodoComponent {
@@ -59,6 +55,14 @@ export class TodoComponent {
   @ViewChild('input') input?: ElementRef<HTMLInputElement>;
   @ViewChild('toggle') toggle?: ElementRef<HTMLInputElement>;
 
+  @HostBinding('class.todo') readonly hostClass = true;
+  @HostBinding('class.completed') get completed(): boolean {
+    return this.todo.done;
+  }
+  @HostBinding('class.editing') get editing(): boolean {
+    return this.isEditing;
+  }
+
   @Input({ required: true })
   set todo(todo: Todo) {
     this.state.set({ todo });