input and output test!

inputAndOutput.ts

import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <app-value-provider (typedValue)="recivedValue($event)"></app-value-provider>
  <app-value-receiver  *ngIf="valueOfInput" [printValue]="valueOfInput"></app-value-receiver>
  `,
})
export class AppComponent implements OnChanges {
  valueOfInput: string;

  recivedValue(event): void {
    return this.valueOfInput = event;
  }

  ngOnChanges(): void {}
}

@Component({
  selector: 'app-value-provider',
  template: `
    <input type="text" (change)="writing()" id="text"/>
  `,
})
export class ValueProviderComponent {
  @Output() typedValue = new EventEmitter<string>();

  writing(): void {
    let text = (<HTMLInputElement>document.getElementById('text')).value;
    this.typedValue.emit(text);
  }
}

@Component({
  selector: 'app-value-receiver',
  template: ` {{ this.printValue }}`,
})
export class ValueReceiverComponent implements OnInit {
  @Input() printValue: string;

  ngOnInit(): void {
    console.log(this.printValue)
  }
}