@Input

Send data from a parent to a child component.

Parent

<!-- Parent HTML -->
<h1>About the Data</h1>
<child-selector [someSweetData]="'pretty sweet ngl'"></child-selector>

Child

// Child Component
import { Component, Input } from '@angular/core';

@Component({...})
export class ChildComponent {
  @Input() someSweetData;
}

<!-- Child HTML -->
<p>The sweet data is {{ someSweetData }}!</p>

@Output

Send data from a child to a parent component.

@ViewChild

Used to pull components from the template into the component. Link.

<!-- Template -->

// Component

You can also pull in plain HTML elements from the template into the component. You do this using template reference variables.

@ViewChildren

If you have a list of elements that all have the same reference variable.

@ContentChild