In my Application, I have a Search form. You can access the form by adding query Parameter and the form will then be prefield.
What I want to achieve know is, that if you click on the search Icon in the navigation is that the pre-filled state will clear. The link works so the URL in browser changes. But the Component does of course not re-render.
Is there a way to render the component, or just a LifeCycle Hook to catch this?
You don't need to reload the page actually. You can make the different-different link to target the form, like:
<a routerLink="/path/to-component" [queryParams]="{'query': 'value1'}">Link 1</a>
<a routerLink="/path/to-component" [queryParams]="{'query': 'value2'}">Link 2</a>
<a routerLink="/path/to-component" [queryParams]="{'query': 'value3'}">Link 3</a>
And you need to subscribe the queryParams in the ts file:
this._ActivatedRoute.queryParams.subscribe(queries => {
console.log(queries);
//whenever the link will be clicked
//queries will be logged here
//then do something like: refreshForm(queries)
});
try to use import { Subject } from "rxjs/Subject";
like
public runtimefilter: Subject<DataClass> = new Subject<DataClass>();
and in constructor Observe is
constructor(){
this.subscription = runtimefilter.subscribe(res => {
this.filter = res;
this.GetDataFunc();
});
}
ngOnInit() {
this.router.queryParams.subscribe((params) => {
this.filter= params["value1"];
runtimefilter.next(this.filter);
}}
this.subscription onDestroy the component