Unsure why data isn't passing correctly from child to parent component in Angular 4

Question

I have two components and would like to pass data from the 'child' component that happens when a user has clicked an image from within that component.

I have two components (posting & gifpicker - the child component)

The function applyGif() is the function in the child component that I am using to pass data across - I want to pass this data to the parent component.

Note - the components have some code not required for this aspect removed from view in this post for extra clarity.

The HTML Component below currently shows nothing in the selectedGif for some reason in the view

-- Posting Component (Parent Component) --

/** long list of imports here **/
@Component({
selector: 'app-posting',
templateUrl: './posting.component.html',
styleUrls: ['./posting.component.scss'],
providers: [ GifpickerService ],
})
export class PostingComponent implements OnInit{

  public selectedGif: any = '';
  @ViewChild(GifpickerComponent) gifpicker: GifpickerComponent;

  ngOnInit(): void {

  }

  constructor(@Inject(DOCUMENT) private document: any,
      public gifpickerService: GifpickerService,
  ) {}
}

-- GifPickerComponent (Child Component) --

import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {GifpickerService} from "./gifpicker.service";

@Component({
  selector: 'app-gifpicker',
  templateUrl: './gifpicker.component.html',
  styleUrls: ['./gifpicker.component.scss'],
  providers: [ GifpickerService ],
})
export class GifpickerComponent implements OnInit {
  public selectedGif: any = {};

 constructor(private gifpickerService: GifpickerService) {}

 ngOnInit() {

 }

  applyGif(gif): any {
    // this is an json object I want to use/see in the Posting HTML Component 
    let gifMedia = gif.media[0]; 
  }
}

-- Posting Component HTML (want data from the gifPickerComponent applyGif() shown here --

<div>{{ selectedGif }}</div>

Answer 1

Have you tried using @Output() to pass the information from child to parent after applyGif() method ends.

In your GifPickerComponent declare:

@Output() gifSelected: EventEmitter<any> = new EventEmitter<any>(); // or whatever type your are sending

Once the GIF is selected in applyGif()

applyGif(gif): any {
    this.gifPickerVisible = false;
    this.uploadedGif = true;
    let gifMedia = gif.media[0]; // this is an json object I want to use/see in the Posting HTML Component 
    this.gifSelected.emit(gifMedia);
}

In the PostingComponent HTML template file where you are using app-gifpicker:

<app-gifpicker (gifSelected)="onGifSelected($event)"></app-gifpicker>

Create onGifSelected in your posting.component.ts file and handle the result:

public onGifSelected(gif: any) {
    // Do whatever you need to do.
    this.selectedGif = gif;
}

In addition, your posting component is the parent and it hosts other components like your GIFPickerComponent, there is no need to provide the service in both components. It is enough to do it in the parent and it will be passed down to the child component. In other words, the same instance will be passed. With your current arrangement, both parent and child have two different instances of a service.