Having trouble working with data from component to component with Angular CLI

The main issue has something to do with the fact that I'm trying to have one component interact with another. I have a list of songs and the idea is that when one song is clicked it calls a function in the "now-playing-bar" component.

Just hitting the play/Pause button calls the playPause function and that works great. The issue comes from when you click a song on the "playlist" component and it calls the function playSong in the "now-playing-bar" component. The function itself seems to work fine, the song starts to play and the data values seem to be assigned. However two errors occur.

Error 1: The html does not update to show the new title and artist.

Error 2: When clicking play/pause to pause a song played from the "playlist" component, playPause function correctly outputs this with all it's correct data fields, but outputs undefined for this.playing

Code is abbreviated for easier reading

now-playing-bar.component.html

<div class="song"></div>
<div class="artist"></div>

now-playing-bar.component.ts

export class NowPlayingBarComponent implements OnInit {
    isActive: boolean;
    progress: number = 10;
    playing: boolean;
    currentSong: Song = {
        "id": null,
        "title": "",
        "artist": "",
        "length": "",
        "fileName": ""
    };
    song: any;
    songs: Song[] = [];

    constructor(private songService : SongsService) { }

    ngOnInit() {
        this.songService.fetchData()
            .subscribe(d => this.songs = d as Song[]);
    }

    playPause() {
        console.log('Play Pause this:');
        console.log(this);
        console.log(this.playing);
        if (this.playing) {
            console.log('Its fucking playing');
            this.playing = false;
            this.song.pause();
        }
        else {
            if (!this.song) {
                this.song = new Howl({
                    src: ['assets/music/' + this.songs[0].fileName]
                });
            }
            this.currentSong = this.songs[0];
            this.playing = true;
            this.song.play();
        }
    }

    playSong(id: number) {
        let that = this;
        this.songService.fetchData()
            .subscribe(function(d) {
                if (that.playing) {
                    that.song.stop();
                    that.song.unload();
                }
                that.song = new Howl({
                    src: ['assets/music/' + d[id].fileName]
                });
                console.log(that.song)
                console.log(that)
                that.currentSong = d[id];
                that.playing = true;
                that.song.play();
            });
    }
}

playlist.component.ts

import { Component, OnInit } from '@angular/core';
import Song from "../models/Song"
import { SongsService } from "../songs.service";
import { NowPlayingBarComponent } from "../now-playing-bar/now-playing-bar.component"

export class PlaylistComponent implements OnInit {
    songs: Song[] = [];

    constructor(private songService : SongsService, private NP : NowPlayingBarComponent) { }

    ngOnInit() {
        this.songService.fetchData()
            .subscribe(d => this.songs = d as Song[]);
    }

    songClicked(id) {
        this.NP.playSong(id)
    }
}

I'm happy to upload the full code if that would help, just didn't want to make it a cluttered mess. I've spent hours researching trying to figure this out but I just can't seem to get it. My best guess is the way that the "playlist" component is interacting with the "now-playing-bar" is incorrect.