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, Apr 07 '20 at 14:24
Does this answer your question? [Angular2 with matrix url notation](https://stackoverflow.com/questions/40171262/angular2-with-matrix-url-notation) — msanford, Apr 07 '20 at 14:24

score 0 · Answer 1 · answered Apr 07 '20 at 14:27

0

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

answered Apr 07 '20 at 14:27

Gourav Garg

2,856
11
24

Thanks for responding. I want to use the url to jump directly into the state of an application.. Allows me to copy the url and run it on another browser tab. And is there a way to shorten the query params using encoding. Can you add a link to it? – Sathya Apr 07 '20 at 16:42
You can see this stackoverflow link https://stackblitz.com/edit/angular-uri-encode-activated-route-param?file=src%2Fapp%2Fapp.component.ts – Gourav Garg Apr 07 '20 at 16:53
The problem with the point 3 you mentioned is that this.route.queryParamMap will be called everytime.. Even for other routes... I want something to happen ngOnInit in which my widget gets the url queryparams.. I guess i can try this.route.snapshot.queryParams – Sathya Apr 07 '20 at 17:24
The example provided doesn't help to shorten the queryparams text in the url – Sathya Apr 08 '20 at 12:13
I think if you use ids like Param_A=test1 to _a=1 where param name and values are kept as enums in your angular. Not all params are possible. 2000 characters are good enough Or you may see how JIRA and other tools works for huge urls. – Gourav Garg Apr 08 '20 at 12:22

Angular 8 Deeplinking on form submit

1 Answers1