Best practices

I have the following in an older Angular app.

newTask: Task = { id: 0, description: '', 
                   completed: false, priority: Priority.Normal };

<div>
  <input [(ngModel)]="newTask.description" />
  <select [(ngModel)]="newTask.priority">
    @for(priority of priorities; track priority) {
    <option [ngValue]="priority">{{ getNameForPriority(priority) }}</option>
    }
  </select>
  <a href="" (click)="addTask(newTask, $event)">add new</a>
</div>

I want to start using signals. What is the best idea:

1. Just wrap a siganl around it. Of course the two-way databinding is now altering the object directly and not the signal.

  newTask = signal({ id: 0, description: '', 
                    completed: false, priority: Priority.Normal });
<div>
  <input [(ngModel)]="newTask().description" />
  <select [(ngModel)]="newTask().priority">
    @for(priority of priorities; track priority) {
    <option [ngValue]="priority">{{ getNameForPriority(priority) }}</option>
    }
  </select>
  <a href="" (click)="addTask(newTask(), $event)">add new</a>
</div>

2. Flatten it out.

id = signal(0);
description = signal('');
completed = signal(false);
priority = signal(Priority.Normal);

 <input [(ngModel)]="description" />
  <select [(ngModel)]="priority">
    @for(priority of priorities; track priority) {
    <option [ngValue]="priority">{{ getNameForPriority(priority) }}</option>
    }
  </select>

I also feel like the newer signal forms will help me out, but I cannot use them yet...

Improve this question