Angular 2 Reload The Current Component Based On User Input

In my Angular2 app, on UI input a component is loaded which pulls data from a web service. I want to reload the aptSearchComponent when the user input changes. Although the new da

Solution 1:

I resolved this by using @Input and ngOnChanges() hook in the child component. will share the detailed answer if anybody needs it.

Solution 2:

To reload it you can remove it with a simple trick.

Put an *ngIf on the component and set it to true initially.

When you want to remove it set it to false, and then using setTimeout flick it back to true instantly. This will remove it and then recreate it.

When you recreate it pass the new parameters you want to pass in from the parent component.

(Angular2 used to use this trick to reset a form, I'm not sure if a better way is available now but during RC this was the correct approach).

Solution 3:

Change detection only work if the property reference changed.

You must reset aptDetails before updating it.

this.aptDetails = {} // or whatever type it isthis.aptDetails = this.sharedService.temp;