1import { Component, Output, EventEmitter } from '@angular/core';
2
3@Component({
4  selector: 'app-child',
5  template: `
6      <button (click)="sendMessage()">Send Message</button>
7  `,
8  styleUrls: ['./child.component.css']
9})
10export class ChildComponent {
11
12  message: string = "Hola Mundo!"
13
14  @Output() messageEvent = new EventEmitter<string>();
15
16  constructor() { }
17
18  sendMessage() {
19    this.messageEvent.emit(this.message)
20  }
21}
22

1import { Component, Input } from '@angular/core';
2//Child-Component
3@Component({
4  selector: 'app-child',
5  template: `
6      Say {{ message }}
7  `,
8  styleUrls: ['./child.component.css']
9})
10export class ChildComponent {
11
12  @Input() childMessage: string;
13
14  constructor() { }
15
16}
17======================================================================
18import { Component } from '@angular/core'; 
19//Parent-Component data transfer to Child-Component
20@Component({
21  selector: 'app-parent',
22  template: `
23    <app-child [childMessage]="parentMessage"></app-child>
24  `,
25  styleUrls: ['./parent.component.css']
26})
27export class ParentComponent{
28  parentMessage = "message from parent"
29  constructor() { }
30}

1import { Component } from '@angular/core';
2
3@Component({
4  selector: 'app-parent',
5  template: `
6    Message: {{message}}
7    <app-child (messageEvent)="receiveMessage($event)"></app-child>
8  `,
9  styleUrls: ['./parent.component.css']
10})
11export class ParentComponent {
12
13  constructor() { }
14
15  message:string;
16
17  receiveMessage($event) {
18    this.message = $event
19  }
20}
21

1Data Transfer from one component to another — Angular 7
2----
3Parent to Child: via Input.
4Child to Parent: via Output() and EventEmitter.
5Child to Parent: via ViewChild.
6Unrelated Components: via a Service.