Question 172511 in Javascript Question posted in
A very good W3school tutorial can be found here.

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');
  }
}
Tags:

2

Answers


  1. 0

    I see a couple of things you can try. Be more specific with the type of @ViewChild, and at the @Input(), you’re trying to interpolate but, since the variable msg hasn’t been declared. I’m guessing you declared it in the parent, so try to fix that, either by removing msg, or passing the string that you need, and not defining it in the child.

    @ViewChild(SearchListComponent) dataSearchList: SearchListComponent;
@ViewChild(SearchComponent) dataSearch: SearchComponent;
//@Input() msg: string = '{msg} not implemented';
    Login or Signup to reply.
  2. 0

    You need to look into SearchListComponent and SearchComponent. Check out what triggers dataPokemonEvent and dataEvent.

    Why are you declaring ViewChilds – you are not using it in AppComponent.

    If you can chare also code of SearchListComponent and SearchComponent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search