@Input() value is undefined

Question

I've created component which takes an @Input() value but I always get undefind. Here's my code:

parent.html

<added-item
      [minItemValueLength]="minItemValueLength"
      [maxItemValueLength]="maxItemValueLength"
      [listOfItems]="listOfItems"
  ></added-item>

children.ts

export class AddedItemComponent implements OnInit, OnChanges{

  @Input() minItemValueLength: number;
  @Input() maxItemValueLength: number;
  @Input() listOfItems: string[];

  ngOnInit() {
    console.log(this.minItemValueLength)      // return 3 
    console.log(this.listOfItems)             // return undefined
  }
}

parent.ts

export class LocationsTabComponent implements OnInit {
  listOfItems: string[];
  minItemValueLength = 3;
  maxItemValueLength = 15;

  public ngOnInit(): void {
    this.locationService.getLocations().subscribe((locations) => {
      this.getLocationsList();
      console.log(this.listOfItems)    // return Array(6)
    });
  }
  private getLocationsList() {
    this.listOfItems = this.locations.map((location: Location) => location.name);
    console.log(this.listOfItems)    // return Array(6)
  }
}

If I use ngOnChanges() in children than it at first output me:

data undefined and then:

data Array(6)

How can I get this value in onInit?

Would be really grateful for any help!

huan feng · Accepted Answer · 2020-08-05 07:26:16Z

This is because you assign

listOfItems = ...

in an async callback method.

If you want to detect the changes, you should implement onChanges interface and implement the corresponding hook method.

export class AddedItemComponent implements OnInit, OnChanges{

    @Input() minItemValueLength: number;
    @Input() maxItemValueLength: number;
    @Input() listOfItems: string[];

    ngOnInit() {
        console.log(this.minItemValueLength)      // return 3 
        console.log(this.listOfItems)             // return undefined
    }
    
    ngOnChanges(changes: SimpleChanges): void {
        if (changes.listOfItems) {
            console.log(this.listOfItems)
        }
    }

}

Orel Eraki · Accepted Answer · 2020-08-05 07:28:10Z

The value isn't always undefined only on the time the component is created, and this is because you passed as such.

Process:

Parent is creating and ngOnInit is starting.
ngOnInit has Observable\Promise\Async method, which means we're not waiting for the response, thus the value is still undefined.
Child component is created and executing the ngOnInit. value still undefined.
The Observable\Promise\Async method is now finally finished and custom callback you created now assigned the value, and the value is passed to the child component. So of course child ngOnInit will not accept it because the component was already created.

There are couple of solutions:

Put *ngIf="listOfItems" on added-item.
Decorate Parent as async ngOnInit, change: .subscribe to .toPromise e.g: await this.locationService.getLocations().toPromise..., now parent ngOnInit will wait for response.

Thanks a lot for explanation! That's really helped! Now I understand all this process.

Basheer Kharoti · Accepted Answer · 2020-08-05 07:47:16Z

1

Since your subscribing to the locations, you can use async to wait until the response is fully resolved or otherwise you have to implement OnChanges interface.

public async ngOnInit(): void {
await this.locationService.getLocations().toPromise().then((locations) => {
  this.getLocationsList();
  console.log(this.listOfItems)    // return Array(6)
});
}
private getLocationsList() {
  this.listOfItems = this.locations.map((location: Location) => location.name);
  console.log(this.listOfItems)    // return Array(6)
}

edited Aug 5, 2020 at 7:47

answered Aug 5, 2020 at 7:22

Basheer Kharoti

4,3025 gold badges27 silver badges51 bronze badges

Collectives™ on Stack Overflow

@Input() value is undefined

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related