Trigger set() when adding element to array - arrays

Question

I am attempting to manage an array within an Angular service like so:
import { TodoItem } from '../models/todo-item.model';
#Injectable()
export class TodoService {
//local storage key name
private readonly lsKey = 'pi-todo';
private _todos: Array<TodoItem>;
//Gets the todo items from local storage
public fetchTodos(): Array<TodoItem> {
//Either get the items if they exist, or get an empty array
this.todos = (JSON.parse(localStorage.getItem(this.lsKey)) as Array<TodoItem>) || [];
return this.todos;
}
//Adds the todo item to local storage
public addTodo(todo: TodoItem): Array<TodoItem> {
if (todo) {
//Better way to do this?
let tempTodos = this.todos;
tempTodos.push(
Object.assign(
{
completed: false
},
todo
)
);
this.todos = tempTodos;
return this.todos;
}
}
private get todos(): Array<TodoItem> {
return this._todos || [];
}
private set todos(todos: Array<TodoItem>) {
this._todos = todos;
localStorage.setItem(this.lsKey, JSON.stringify(this._todos));
}
}
When adding a todo item to the todos array, I tried doing this.todos.push(...); but then that doesn't trigger the setter. How can I do this without using a temp array?

Answer 1

I'd suggest moving the "save to local storage" code to a separate method called by both the setter and the add.
//Adds the todo item to local storage
public addTodo(todo: TodoItem): Array<TodoItem> {
if (todo) {
this.todos.push(
Object.assign(
{
completed: false
},
todo
)
);
this.save();
return this.todos;
}
}
private set todos(todos: Array<TodoItem>) {
this._todos = todos;
this.save();
}
private save() {
localStorage.setItem(this.lsKey, JSON.stringify(this._todos));
}

Answer 2

Yes, because you aren't setting it a new value. A work around would be this: instead of pushing into the array, grab the current array, assign it to a temp variable, then replace with new array. Like so:
triggerSet(newValue) {
const tempArray = this.todos;
tempArray.push(newValue);
this.todos = tempArray;
}