viewchild.ts

@Component({
  selector: 'parent-component',
  template: '<child-component></child-component>'
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child!: ChildComponent;

  protected myData = 'my data';

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

  ngAfterViewInit() {
    this.child.setData(this.myData);

    this.child.obs$.subscribe(counter => alert(counter));
  }
}

@Component({
  selector: 'child-component',
  template: '<div (click)="emitCounter()">{{ myData }}</div>'
})
export class ChildComponent {
  data: string;

  private sub = new Subject<number>();
  obs$ = sub.asObservable();

  private counter = 0;
    
  setData(data: string) {
    this.data = data; 
  }

  emitCounter() {
    this.sub.next(++counter);
  }
}