@Input () is always always undefined

Question

I created a user photo component that takes the value @Input() , this is the value of userId. If the value is passed, I retrieve the information from Firebase , referring to this userId, if it is not, I am doing something else.

My custom component photo

 import { Component, OnInit, OnDestroy, Input } from '@angular/core'; @Component({ selector: 'user-photos', templateUrl: './user-photos.component.html', styleUrls: ['./user-photos.component.css'] }) export class UserPhotoComponent implements OnInit { @Input() userId: string; constructor() { console.log('userId is:',this.userId); } ngOnInit() { } ngOnDestroy() { } } 

As you can see, I declared userId as @Input() , now on my edit-profile component I have the following:

 <user-photos [userId]="TestingInput"></user-photos> 

Now the User Photo component gets rendered as I see the h1 tag, but is userId always undefined?

Errors do not appear in the developer console, so I'm not quite sure what I did wrong.

Answer 1

It will be initialized in ngOnInit , not in the constructor. (Please also check out the Angular documentation. Lifecycle documentation .)

 ngOnInit() { console.log('userId is:',this.userId); } 

Also, if you want to pass a literal as a string and use brackets [] , you must pass it as a string by adding a value with single ticks.

 <user-photos [userId]="'TestingInput'"></user-photos> 

The reason for this is that the containing expression is evaluated in the context of the containing component, so without it, it will try to extract and pass a property / field with the name TestingInput , which will be undefined (if you also do not have a field with this name).

Answer 2

In my case, I passed an undefined value as input, and assumed that Angular would handle the case of uncertainty in the same way as the default script. This assumption was incorrect even if it was not clearly indicated in the documentation on the angular interaction of the components . Here is a use case scenario:

parent.component.html:

 ... [mVal]="undefined" ... 

child.component.ts:

 ... @input('mVal') mVal: boolean = true ... 

The value of mVal will be undefined and not true , as you might expect.

Angular will set to true (default case) only if it is not defined in the parent component; otherwise, it will pass the value as is (even if it is not undefined ).

You can solve this problem by checking if the value is undefined in OnInit or even in the component constructor.

Answer 3

In my case, I first had to use * ngIf = "isLoaded" on the parent template.

On the parent component

  <div *ngIf = "isLoaded"> <app-child-component [dataToChild]="dataFromParent"> </app-child-component> </div> 

On the child component

  @Input() dataToChild: any; constructor() { } ngOnInit(): void { console.log(this.dataToChild); } 

Answer 4

Answering your question

@Input () is always undefined

The reason you get undefined on ngOnInit is because you didn't actually pass userId at the time the component was initialized.

 <user-photos [userId]="TestingInput"></user-photos> 

To get the @Input value in the OnInit () function, you can do something like:

My custom photo component

 import { Component, OnInit, OnDestroy, Input } from '@angular/core'; @Component({ selector: 'user-photos', templateUrl: './user-photos.component.html', styleUrls: ['./user-photos.component.css'] }) export class UserPhotoComponent implements OnInit { @Input() userId: string; constructor() { } ngOnInit() { setTimeout(() => { console.log('userId is:',this.userId); // You will get the @Input value }); } ngOnDestroy() { } } 

Answer 5

I recently encountered the same problem, and after a long search I decided to mix my ideas and ended up with the following.

1. declare an object of the data array that you want to transfer, as

private sendMe: Array<{title: string}> = [];

2. put the data you want to send to the array as

this.sendMe.push({title: this.passMe});

3 and finally pass the array as

<app-download-section [movieTitle]="sendMe"></app-download-section>

4. get it like

   import { Component, OnInit, OnDestroy, Input } from '@angular/core';

   @Component({ selector: 'app-download-section', templateUrl: './download-section.component.html', styleUrls: ['./download-section.component.css'] }) export class DownloadSectionComponent implements OnInit {

   @Input('movieTitle') movieTitle: Array<object> = [];

   ngOnInit() { console.log(this.movieTitle); }

   }

I found this problem