pass data from child component to parent component Angular4

Question

I have lists of apis which are stored in a server: ServerGetData, like this:

apis = {
 "Repo Assignment": "https://apis.repoAssignment",
 "Status Summary": "https://apis.statsSummary",
 ...
}

I have created a child component drop down menu: TitleDropdownComponent child component, which displays all api titles: "Repo Assignment"...

In my parent component, I wanted to render different data tables based on the title which is selected from child component.

Right now, I can successfully get titles from child component and print them in the console in parent component, However, in my ngOnInit(), the same variable can not be changed accordingly, always get same api data because of title variable does not change.

How can I change the title variable in ngOnInit or using other way like ngOnChanges?

Please see my parent app component below.

import { Component, Input, EventEmitter, Output, ViewChild, OnInit } from '@angular/core';
import { ServerGetData } from './server.getData';
import { TitleDropdownComponent } from './TitleDropdown/titleDropdown.component'


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  // make ajax call from ServerGetData

  constructor(private dataService: ServerGetData) {}

  data = {};

  // get Child component variables

  @ViewChild(TitleDropdownComponent)
  private titleComponent: TitleDropdownComponent;
  
  onSelected(selected: string) {
    // default child component title is "Repo Assignment", in here overwrite 
    // titleComponent.title to be selected title
    this.titleComponent.title = selected;
    // each time can the selected title can be printed in console
    console.log(this.titleComponent.title);
    return this.titleComponent.title;
  }
  
  ngOnInit(): void {
   this.dataService.getData(this.titleComponent.title).subscribe(
      (data) => {
        this.data = data.items;
      }
    );
  };

}

I have no idea why here this.titleComponent.title is not able to change accordingly and always is default title: "Repo Assignment".

Answer 1

The ngOnInit is only always executed one time when the component is initialized. It won't later re-execute as other selections are made.

If you need to reget the data each time a new item is selected, move the code to within the onSelected method.

  onSelected(selected: string) {
    // default child component title is "Repo Assignment", in here overwrite 
    // titleComponent.title to be selected title
    this.titleComponent.title = selected;
    // each time can the selected title can be printed in console
    console.log(this.titleComponent.title);

    this.dataService.getData(this.titleComponent.title).subscribe(
      (data) => {
        this.data = data.items;
      }
    );

    return this.titleComponent.title;
  }