Angular 4 init child component input

Question

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.

wat is the type of _maxPrice?

Faly
– Faly

2018-03-27 13:48:12 +00:00
Commented Mar 27, 2018 at 13:48 — Faly
– Faly, Commented Mar 27, 2018 at 13:48
Try to implement NgOnInit interface.

Carnaru Valentin
– Carnaru Valentin

2018-03-27 13:48:25 +00:00
Commented Mar 27, 2018 at 13:48 — Carnaru Valentin
– Carnaru Valentin, Commented Mar 27, 2018 at 13:48

Swoox · Accepted Answer · 2018-03-27 13:49:30Z

2

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>

answered Mar 27, 2018 at 13:49

Swoox

3,7602 gold badges23 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Faly · Accepted Answer · 2018-03-27 13:49:15Z

2

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>

answered Mar 27, 2018 at 13:49

Faly

13.4k2 gold badges21 silver badges39 bronze badges

2 Comments

error Over a year ago

I need to have the maxPrice, I think that the child component is instantiated before getting the maxPrice. How to wait for the maxPrice before instantiating the child component ?

Faly Over a year ago

' wait for the maxPrice before instantiating the child component' => that exactly what the *ngIf in this code does

Vivek Doshi · Accepted Answer · 2018-03-27 13:48:41Z

1

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>

answered Mar 27, 2018 at 13:48

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

3 Comments

error Over a year ago

I need to have the maxPrice, I think that the child component is instantiated before getting the maxPrice. How to wait for the maxPrice before instantiating the child component ?

Vivek Doshi Over a year ago

@zak , this will do the same thing this will check if maxPrice is instantiated , if yes it will load the component else not.

Vivek Doshi Over a year ago

@Zak , Glad to know that it helped you , will you please also accept the answer ?

Haifeng Zhang · Accepted Answer · 2018-03-27 13:53:24Z

0

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.

answered Mar 27, 2018 at 13:53

Haifeng Zhang

32.1k21 gold badges95 silver badges133 bronze badges

Comments

Akshath Kumar · Accepted Answer · 2018-03-27 13:58:16Z

0

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)
    }

answered Mar 27, 2018 at 13:58

Akshath Kumar

5192 gold badges6 silver badges15 bronze badges

2 Comments

Akshath Kumar Over a year ago

@zac Please try this. No need for adding any *ngIf

error Over a year ago

Your answer seems to be elegant but I need the maxPrice to be number, not an observable. Thank you

Collectives™ on Stack Overflow

Angular 4 init child component input

5 Answers 5

Comments

2 Comments

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related