refactor: use styles as string

edbzn · Nov 7, 2023 · 889a698 · 889a698
1 parent 1ee0463
commit 889a698
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 25 deletions.
diff --git a/projects/todo-mvc/src/app/todo-list.component.ts b/projects/todo-mvc/src/app/todo-list.component.ts
@@ -1,29 +1,26 @@
 import { CdkDrag, CdkDropList } from '@angular/cdk/drag-drop';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   HostBinding,
   inject,
 } from '@angular/core';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { RxLet } from '@rx-angular/template/let';
-import { TodoComponent } from './todo.component';
 import { TodoService } from './todo-list.state.service';
+import { TodoComponent } from './todo.component';
 
 @Component({
   standalone: true,
   selector: 'app-todo-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [ReactiveFormsModule, RxLet, TodoComponent, CdkDropList, CdkDrag],
   providers: [TodoService],
-  styles: [
-    `
+  styles: `
       :host {
         display: block;
       }
     `,
-  ],
   template: `
     <header class="header">
       <h1>Todo</h1>

diff --git a/projects/todo-mvc/src/app/todo.component.ts b/projects/todo-mvc/src/app/todo.component.ts
@@ -42,33 +42,31 @@ const eventChecked = (e: Event): boolean => {
   standalone: true,
   selector: 'app-todo',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [
-    `
+  styles: `
       :host {
         display: block;
       }
-    `,
-  ],
+  `,
   template: `
     @if (isEditing) {
-    <input
-      #input
-      class="edit"
-      [value]="todo.text"
-      (blur)="actions.updateText($event)"
-      (keyup.enter)="actions.updateText($event)"
-    />
-    } @else {
-    <div class="view">
       <input
-        class="toggle"
-        type="checkbox"
-        [checked]="todo.done"
-        (input)="actions.toggleDone($event)"
+        #input
+        class="edit"
+        [value]="todo.text"
+        (blur)="actions.updateText($event)"
+        (keyup.enter)="actions.updateText($event)"
       />
-      <label (dblclick)="actions.edit()">{{ todo.text }}</label>
-      <button class="destroy" (click)="actions.remove(todo)"></button>
-    </div>
+    } @else {
+      <div class="view">
+        <input
+          class="toggle"
+          type="checkbox"
+          [checked]="todo.done"
+          (input)="actions.toggleDone($event)"
+        />
+        <label (dblclick)="actions.edit()">{{ todo.text }}</label>
+        <button class="destroy" (click)="actions.remove(todo)"></button>
+      </div>
     }
   `,
 })