parent-child.ts

@Component({
  selector: 'parent-component',
  template: '<child-component [myInput]="myData" (myOutput)="handleEvent($event)"></child-component>'
})
export class ParentComponent {
  protected myData = 'my data';

  handleEvent(counter: number) {
    alert(counter);
  }
}

@Component({
  selector: 'child-component',
  template: '<div (click)="emitCounter()">{{ myData }}</div>'
})
export class ChildComponent {
  @Input() myInput!: string;
  @Output() myOutput = new EventEmitter<number>();
    
  private counter = 0;
    
  emitCounter() {
    this.myOutput.emit(++counter);
  }
}