Angular 5 Show browser alert when query param changes

Question

I have a Parent component Item which has route '/Item'.

I have two children component name Catalogue component and AddSize component.

By default, Catalogue component will be loaded with route '/item?q=catalogue'. Then user select product then route will be changed to '/item?q=add_size' and AddSize component will be loaded.

Now, if the browser clicks the browser back button then query param will be changed from '/item?q=add_size' to '/item?q=catalogue'.

I'm having the issue when the user clicks the back button in '/item?q=add_size' route browser alert not working.

guard service and host listener not helping in that scenario because I'm in the same route and expecting browser alert for only query param change.

Do we have any alternate solutions?

Answer 1

You need to create subscription to your route.

this._route.queryParams
    .subscribe(
        params => {
            this.q = params['q'];
            if (q == 'add_size') 
            {
                do something
            }   
            else if (q == params['catalogue']) 
            {
                do something else
            }       
            });

Put it in your OnInit() code.