Home / Questions / 322171
Accepted
ASASCED
Asked: 2020-01-16 18:06:02 +0800 CST 2020-01-16 18:06:02 +0800 CST

Error with Input - Angular

  • 772

I have an error when I try to use an input in my code, for some reason it is not taking the information to the child component even though the variable that I send contains information.

PARENT COMPONENT

<div class="grid">
    <div class="cards">
        <app-cards *ngFor="let card of cards" [info]="card"></app-cards>
    </div>
</div>

CHILD COMPONENT

import { Component, OnInit, Input } from '@angular/core';
import { PokeappService } from '../../services/pokeapp.service';

@Component({
  selector: 'app-cards',
  templateUrl: './cards.component.html',
  styleUrls: ['./cards.component.sass'],
})
export class CardsComponent implements OnInit {
  pokemon: any = {};
  @Input() info: any = {};

  constructor(private pokeService: PokeappService) {
    this.pokeService.getPokemon('3').subscribe(pokemon => {
      this.pokemon = pokemon;
    });

    console.log(this.info); // Aquí deberia de mostrarme la info que envie.
  }

  ngOnInit() {}
}
angular

2 Answers

  1. Best Answer

    This can happen because at the level of the info constructor it still does not receive the data, but until the component loads, it tries to make the console.log inside the ngOnInit

      <app-cards [info]="true"></app-cards>

  @Input() info: any = {};

  constructor() {
     // resultado {}
     console.log(this.info);
  }

  ngOnInit() {
     // resultado true
     console.log(this.info);
   }
    • 3

  2. to solve this problem cost me but it's simple, just use this method:

    ngOnChanges(){
    console.log(this.info);
  }

    What this method does is run every time it detects a change in the inputs. I hope it works for you.

    • 1