Angular 8 Deeplinking on form submit

Question

I have gone through few posts on deeplinking in Angular 8. But haven't found a better solution for my problem.

Prob Requirement: enter image description here

Please refer to the screenshot above. I have simple Angular application with two widgets Form Widget and Table Widget. Table widget is driven by the search performed in the Form Widget The url in the browser is "localhost/dashboard/widget/actionForm"

When the Form search is performed. I want the form data to be part of the URL like "localhost/dashboard/widget/actionForm;Param_A=test1;Param_B=test2" and also the table widget to be updated dynamically
When i copy the URL "localhost/dashboard/widget/actionForm;Param_A=test1;Param_B=test2" and launch it in a new browser. It should be able to use the params in the url to get back the form state.

This is just an illustration. In ideal case, there will be lot of params in the form.

Note: The URL params also needs to be encoded. But I guess that's a simple problem to solve.

Sure, matrix URLs are a good way to go. What's the problem? Is that not working? — msanford
Does this answer your question? Angular2 with matrix url notation — msanford

Gourav Garg Gourav Garg · Accepted Answer · 2020-04-07T14:27:26

There is a limit on url characters depends on various parameters. You can check here

When you perform the search these params should be append to url:

   this.router.navigate([], {
        queryParams: {
            _t: param1,
            _t2: param2
        }
    });

When you reload with url you should be able to use these params:

this.route.queryParamMap.subscribe(params => {
    let t= params.get('_t');
    //.... so on
    pass this to table widget
});

If your params are much longer than character limit and you want to maintain session on same browser you can always use local storage and session storage

Angular 8 Deeplinking on form submit

1 Answers