Angular Communication Between Components

First example is from parent to child.

// parent.component.ts 

export class ParentComponent implements OnInit {

  textVarFromParent = 'Text to be passed to child component';

  ngOnInit(): void {
  }

}
// parent.component.html

<app-child [text]="textVarFromParent"></app-child>
// child.component.ts

export class ChildComponent implements OnInit {

  constructor () { }

  @Input() text: string;

  ngOnInit() { }
}
// child.component.html

{{ text }}

Child to parent.

// child.component.ts

export class ChildComponent implements OnInit {

  constructor() { }

  @Output() text = new EventEmitter<string>();

  ngOnInit(): void {
    this.text.emit('text from child');
  }

}
// app.component.html

<app-child (text)="textVarFromChild"></app-child>
// parent.component.ts

export class ParentComponent implements OnInit, OnChanges {

  textVarFromChild: string;

  ngOnChanges(): void {
    console.log(this.textVarFromChild);
  }

  ngOnInit(): void {
  }
}

More complex example.

// child.component.ts 

export class ChildComponent implements OnInit {

  constructor() { }

  @Output() text = new EventEmitter<string>();

  changeText(value: string) {
    console.log('From child component:' + value);
    this.text.emit(value);
  }

  ngOnInit(): void {
  }

}
// child.component.html

<button (click)="changeText('changed')">Change Text</button>
// parent.component.ts 

export class ParentComponent implements OnInit {

  changeText(value: string) {
    console.log('Parent component:' + value);
  }

  ngOnInit(): void {

  }
}
// parent.component.html

<app-child (text)="changeText($event)"></app-child>