[Angular] Expression Changed After Checked Error

https://github.com/tastejs/todomvc/blob/master/examples/angular/src/app/todo-item/todo-item.component.ts https://github.com/tastejs/todomvc/blob/master/examples/angular/src/app/todo-item/todo-item.component.html

So I have copied this exact code and run it using Angular 18. When the input is focused, the title property is changed, resulting in this error

handleFocus(e: Event) {
    this.title = this.todo.title;
  }

Expression Changed After Checked https://angular.dev/errors/NG0100

It makes total sense that the title is changed in afterViewChecked hook creating this error. So is this a good practice? Is there any better way to set up the title like when the todo is set or use onChanges hook?

@Input() set todo(data: Todo) {
    this._todo = data;
    this.title = this.todo.title;
}