components.output.ts

@Component({
  selector: 'nested-component',
  template:  `
    <div>
      <input id="nestedInput" type="text" (blur)="onBlurMethod()" />
    </div>
  `
})
class NestedComponent {
  @Output() onBlur: EventEmitter<any> = new EventEmitter();
    
  onBlurMethod(){
      this.onBlur.emit({'message': 'Hi, this is an event from a nested component'}); 
    }
}

@Component({
  selector: 'parent-component',
  template: `
    <div>
      <nested-component (onBlur)="onBlur()"></nested-component>
    </div>
  `
})
class ParentComponent {
  
  onBlur() {
    console.log('The user navigated away from the input box');
  }

}