Why isn’t the Template Method executing onLoad in Javascript/ANGULAR?

Im doing a simple app, but for some reason, the parent methods, that Im invokes in the template, are not working.

1. Am I missing something?
2. Seams like the template is executed before the TS is ready. Is this possible? If yes, how to prevent it?

Template:

    <app-search-list
      [dataResults]="Pokemons"
      [pokemonArray]="pokemonDataArray"
      (dataPokemonEvent)="receivePokemonData($event)"
    ></app-search-list>

    <app-search (dataEvent)="receiveCustomData($event)">
      <p style="background-color: yellow">share data: {{ msg }}</p>
    </app-search>

typescript

import {
  Component,
  Input,
  ViewChild,
} from '@angular/core';
import { SearchListComponent } from './search-list/search-list.component';
import { SearchComponent } from './search/search.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements AfterContentInit {
  @ViewChild(SearchListComponent) dataSearchList: any;
  @ViewChild(SearchComponent) dataSearch: any;
  @Input() msg: string = '{msg} not implemented';


  @Input() pokemonDataArray: Object[] = [];

  Pokemons = [  ];

  constructor() {}

  receiveCustomData(event: any) {
    this.msg = event;
    alert('receiveCustomData');
    console.log('receiveCustomData');
  }

  receivePokemonData(event: any) {
    console.log('receivePokemonData');
    alert('receivePokemonData');
    this.pokemonDataArray = event;
  }

  ngAfterContentInit(): void {
    // this.receiveCustomData('Test');
  }
}