title: Simple state management in Angular?
body: <p>I'm learning Angular from the very beginning, and coming from React, I can't find a way to manage a simple state in Angular. It's a simple todo app, and my strategy is to create a Todos array in todo.service.ts</p>
  
  <pre class="lang-js prettyprint-override"><code>@Injectable()
  export class TodoService {
    todos: Todo[] = [
      { id: 0, title: 'Cooking', completed: false }
  ]
    nextId: number = 1;
    constructor() { }
    public getTodos(): Todo[] {
      return this.todos;
    }
    public addTodo(title: string): any {
      this.newTodo = new Todo({ id: this.nextId, title, completed: false })
      this.todos.push(this.newTodo);
      this.newTodo = new Todo();
      this.nextId++
    }
    public deleteTodo(chosenTodo: Todo): any {
      this.todos = this.todos.filter(todo =&gt; todo.id !== chosenTodo.id)
    }
  }
  </code></pre>
  
  <p>Now on the ListingComponent, I want to get all Todos, and then pass it down to ListingItemComponent, as such</p>
  
  <pre class="lang-js prettyprint-override"><code>todos: Todo[] = []
    todoTitle: string = '';
    constructor(private todoService: TodoService) { }
    ngOnInit(): void {
      this.todos = this.todoService.getTodos();
      this.todoTitle = 'Do Something';
    }
  
    addTodo() {
      this.todoService.addTodo(this.todoTitle);
    }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div *ngFor="let todo of todos"&gt;
    &lt;todo-listing-item [todo]="todo"&gt;&lt;/todo-listing-item&gt;
  &lt;/div&gt;
  /* This just adds a todo with title 'Do Something' for testing */
  &lt;button (click)="addTodo()"&gt;Add Todo&lt;/button&gt;
  </code></pre>
  
  <p>Finally in ListingItemComponent</p>
  
  <pre class="lang-js prettyprint-override"><code>  @Input() todo: Todo
    constructor(private todoService: TodoService) { }
  
    ngOnInit(): void {
    }
    deleteTodo(): void {
      this.todoService.deleteTodo(this.todo)
    }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;h1&gt;{{todo.title}}&lt;/h1&gt;
  &lt;button (click)="deleteTodo()"&gt;Delete Todo&lt;/button&gt;
  </code></pre>
  
  <p>Now the component has no error, and I made sure to declare everything, but it's not working. Clicking the button won't change anything. After digging in, I changed the ListingComponent into <code>"let todo of todoService.getTodos()"</code>, and remove the todos in the ts file along with the ngOnInit, and somehow it works. My guessing is that the ListingComponent doesn't know that the todos array has changed, and so it's not rerendering? </p>
  
  <ol>
  <li>So if I was to initialize the todos in the ngOnInit like I did before, do I need some other life-cycle to listen to the change of todos?</li>
  <li><p>If many components need the todos array, should I write <code>ngOnInit(): void {
  this.todos = this.todoService.getTodos();}</code> on every single one of them? And if one component changes their todos, can other components listen and rerender as well?</p>
  
  <p>Thank you for reading. In React I would just create a global state, along with the functions, and pass it as props down to every child. But I can't wrap my head around managing state in Angular. Is it because I'm thinking in React, while I should not?</p></li>
  </ol>