CODEWITHSUNDEEP
javascripthtmlangular
error
error

Reputation: 946

Angular 4 init child component input

My parent component html contains this line to call a child component with a default value of maxPrice:

<app-filter-events [maxPrice]='_maxPrice'></app-filter-events>

The parent component is getting the maxPrice by calling an API before instantiating the child component, here is the code :

constructor(private _dataService: DataService) {
 this._dataService.getEventsByCriteria(this._filterCriteria).subscribe(res => this._maxPrice = res);
}

The problem is that maxPrice is undefined in the child component. I guess that the problem come from the async call to the API but I have no idea to resolve it.

Thanks

EDIT : My problem is not to hide the child component if the maxPrice is undefined but to have the maxPrice setted before instantiating the child component.

Upvotes: 0

Views: 2355

Answers (5)

Akshath Kumar
Akshath Kumar

Reputation: 519

use async pipe :

<app-filter-events [maxPrice]='_maxPrice$ | async'></app-filter-events>

component code

    _maxPrice$: Observable<number>;
   constructor(private _dataService: DataService) {
     this._maxPrice$ = this._dataService.getEventsByCriteria(this._filterCriteria)
    }

Upvotes: 0

Haifeng Zhang
Haifeng Zhang

Reputation: 31915

constructor executes before @Input(), so the binding Input value is undefined in your constructor block, make your component implements OnInit and access @Input() variable in ngOnInit() method, it would be ready to use.

Upvotes: 0

Swoox
Swoox

Reputation: 3740

It's quite simple make a variable set it to false before you call the call and set it to true after the async is done. You don't want the component to be loaded in the dom, before you're done.

<div *ngIf="maxPriceBoolean">
  <app-filter-events [maxPrice]='_maxPrice'></app-filter-events>
</div>

Upvotes: 2

Faly
Faly

Reputation: 13356

You can not instantiate app-filter-event component at the time _maxPrice is still undefined:

<app-filter-events *ngIf='_maxPrice' [maxPrice]='_maxPrice'></app-filter-events>

Upvotes: 2

Vivek Doshi
Vivek Doshi

Reputation: 58593

Simply use *ngIf :

<app-filter-events *ngIf='_maxPrice' [maxPrice]='_maxPrice'></app-filter-events>

OR

<ng-container *ngIf="_maxPrice">
   <app-filter-events [maxPrice]='_maxPrice'></app-filter-events>
</ng-container>

Upvotes: 1

Related Questions