app.component.ts

import { Component, ViewChild, ElementRef } from '@angular/core';
import { v4 as uuid } from 'uuid';
import { Todo } from './app.module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  @ViewChild('todoInput') todoInput: ElementRef;

  todos: Todo[] = [];

  addTodo(event: KeyboardEvent): void {
    if (event.keyCode !== 13) { return; }
    const todo: Todo = {
      id: uuid(),
      text: this.todoInput.nativeElement.value,
    };
    this.todos.push(todo);
    this.todoInput.nativeElement.value = '';
  }

  removeTodo(todo: Todo): void {
    const index = this.todos.findIndex(t => t.id === todo.id);
    this.todos.splice(index, 1);
  }
}