Adder.html

<div>
  <input [(ngModel)]="value" />
  <button type="button" (click)="addValue(value)">Add</button>
</div>

Adder.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'adder',
  templateUrl: './template.html',
})
export class AdderComponent {
  value: String = "";

  @Output('onAdd') onAdd: EventEmitter<String> = new EventEmitter();

  addValue = (): void => {
    this.onAdd.emit(this.value);
    this.value = "";
  }

}

TodoList.html

<div>
  <adder (onAdd)="addItem($event)"></adder>
  <ul>
    <li *ngFor="let item of items">
      {{item}}
    </li> 
  <ul>
<div>

TodoList.ts

import { Component } from '@angular/core';

@Component({
  selector: 'todo-list',
  templateUrl: './TodoList.component.html',
  styleUrls: ['./app.component.css']
})
export class TodoListComponent {
  items: Array<String> = ['spam', 'eggs'];

  addItem = (item: String): void => {
    console.log(item);
    this.items = [ ...this.items, item ];
  }
}