Q:

Share Component Data with Other Components

I have followed this tutorial which has been super helpful but it seems I am still get getting it and I do not understand what I am missing! 
As the mouse moves over a list in my child component (burger-component) I want the text to appear dynamically on the parent component (header-component). 
As I one hovers, it gets the text, it emits the text but I can't get it to parent container! 
Below is my code: 

The list from burger-component 

<li><a routerLink="/about" (mouseover)="getText($event)">about</a></li>
      <li><a routerLink="/what-to-expect"(mouseover)="getText($event)">what to expect</a></li>
      <li><a routerLink="/gallery"(mouseover)="getText($event)">gallery</a></li>
      <li><a routerLink="/activities"(mouseover)="getText($event)">activities</a></li>
      <li><a routerLink="/contact"(mouseover)="getText($event)">contact</a></li>

-ts from Burger component

  ngOnInit() {
   this.active = this.init || false;
  } 

  onBurgerClicked() {
    this.active = ! this.active;
    this.opened.emit();
  }

  getText(event) {
    this.title = event.target.innerText;
    this.sendTitle.emit(this.title)
    console.log("title sent", this.title);
  }

-ts header-component 

  pageTitle: string;

  constructor() { }

  ngOnInit() {
  }

  getTitle($event) {
    console.log("title recieved");
   this.pageTitle = $event;
  }

<app-header-component (sendTitle)="getTitle($event)"></app-header-component>

An image of my file hierarchy in the project

A:

You can definitely accomplish this with some of the methods shown in this brief YouTube video: https://youtu.be/I317BhehZKM
You should also really consider using string interpolation here:
burger html
<li><a routerLink="/about" (mouseover)="getText(about)">{{about}}</a></li>
<li><a routerLink="/what-to-expect"(mouseover)="getText(whatToExpect)">{{whatToExpect}}</a></li>
<li><a routerLink="/gallery"(mouseover)="getText(gallery)">{{gallery}}</a></li>
<li><a routerLink="/activities"(mouseover)="getText(activities)">{{activities}}</a></li>
<li><a routerLink="/contact"(mouseover)="getText(contact)">{{contact}}</a></li>

burger ts
//Add Output and Event Emitter to your imports
import { Component, OnInit, Output, EventEmitter  } from '@angular/core';

export class BurgerComponent implements OnInit {
  //Add these variables for your string interpolation and also make sure you have the output decorator and variable
  about: string = "About";
  whatToExpect: string = "What to Expect";
  gallery: string = "Gallery";
  activities: string = "Activities";
  contact: string = "Contact";
  @Output() burgerText = new EventEmitter<string>()

  ngOnInit() {
    this.active = this.init || false;
  } 

  onBurgerClicked() {
    this.active = ! this.active;
    //this.opened.emit();
  }

  getText(text: string) {
    this.burgerText.emit(text);
    console.log("title sent", text);
  }

}

header html
<h5>{{pageTitle}}</h5>
<app-burger (burgerText)="getTitle($event)"></app-burger>

header ts
  pageTitle: string;

  constructor() { }

  ngOnInit() {
  }

  getTitle($event) {
    console.log("title recieved: ", $event);
    this.pageTitle = $event;
  }

