Getting/setting data into URL --- Angular 2

Question

I've done something like this:

setURL(){
  this.router.navigate(['/app/chart', {height: this.chartHeight, width: this.chartWidth}]);
}

ngOnInit() {

    this.route.params.subscribe(
        (params: any) => {
            this.chartHeight= params['height'] || 0;
            this.chartWidth= params['width'] || 0;
        }
    );
}

It is fine because if the params are not set (are not in the url) - default width and height is set to 0. And its okey. But if I change this or if I set some values in the url and hit enter, nothing changes. I mean, if I console.log it - values are set correctly, but the DOM is not affected. There are no changes at all. This is weird...

I want to make sure I understand your real question. You want to make a pass data kind of like a get request so the parameters appear in the URL on the next page the user goes to? If so I think you might want to look at this, http://stackoverflow.com/a/37157905/2218253 — wuno, Mar 16 '17 at 15:47
@wuno I don't want to pass it anywhere. I just want to let user be able to set chart setting just by url, for example height of chart. So when user types whole url, the chart loads with settings from url. :)) — Gregory House, Mar 16 '17 at 15:56
So the user will type a url and then you will load the data from it? So why not save the data from each url into a variable and call it when the user types the correct url? I am asking cause I want to help I just don't understand your exact issue. Have you had trouble passing data between components in angualr2? — wuno, Mar 16 '17 at 15:58
@wuno Do you know ventusky? https://www.ventusky.com/ If you choose some option or just move the dynamic map, the URL will dynamically change and if you copy and paste it, the exactly the same settings will appear and the map will be moved on the place before. I want something similar. Thats why I want to send few variables to URL and be able to download them on app init. — Gregory House, Mar 16 '17 at 16:02

score 2 · Answer 1 · edited May 23 '17 at 11:54

2

** Update Start **

I realize now you also want the url to exist so that you can allow people to go directly to the location with the URL. You will also need to handle a function that will pull the Parameters from the URL.

I believe this answer will help you with that, but I have not faced that problem yet.

** Update End **

The website you are trying to replicate the functionality of is making a get request.

In angular 2 if you want to pass data to the url you would do it like this,

You will need these imports

import { Http, Response, Headers, URLSearchParams }from '@angular/http';
import { Observable }from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/take';

Create observable to update the data when it changes in the page without refreshing it.

 private DimensionsData: Observable<any>;

This function gets called everytime there is a new data set to pass.

    private SendData() {
        let params: URLSearchParams = new URLSearchParams();
        params.set('width', this.width);
        params.set('length', this.length);
        return this.http.get('UrlPathHere/',
            { search: params })
            .map((res: Response) => res.json())
        .take(1) //Takes the first observable and unsubscribes 
        .subscribe(res => this.DimensionsData = res.data_response)
    }

You will call the function to get things started in the ngOnInit() method,

ngOnInit() {
        this.SendData();
}

Now you can take DimensionsData and use it in your code as the settings on the page. Every time someone updates the page, the GET request would get called and this variable would update. DimensionsData.

All you have to do is create a service that takes the data from the URL and then passes it back as the response.

I have explained how to do this with a get request because that is exactly how the example website is doing it that you showed me.

You can see that in this picture here,

edited May 23 '17 at 11:54

Community

1
1

answered Mar 16 '17 at 16:14

wuno

9,547
19
96
180

This seems complicated. Is my method wrong? Or won't work as it is supposed to? I will try it. – Gregory House Mar 16 '17 at 16:18
Yes it is pretty complicated. You are going to run into a few problems. You have to tell angular2 to update the data when you want it to. Even if the data was in the URL like you want how would you expect the page to change like the example you showed me? You need the observable for that. Also it is very common for people to make get request for calculations to be done or retrieve data based on the data sent. If you can handle all of this on the front end that is fine but basically you would still create an observable and then pass the data back and forth between a service. – wuno Mar 16 '17 at 16:21
Is there a way to simplify it a little bit? Lets say that I want to generate the url only on `button` click. If user clicks it, the function send to the URL these set variables. So I dont have to add anything with will observe the actual state. I have shown it in my question, it sends the values to the URL, but can retrieve them. Anyways thank you so much. – Gregory House Mar 16 '17 at 16:24
Please see my updated answer. I added a link to question asking how to obtain the data from the URL. So what I would do is set a few values in the page that were attached to variables pulled from the URL. Then that data would console.log to the console when page loaded and parameters have changed. – wuno Mar 16 '17 at 16:29
Also this concept has been the hardest thing for me to learn in angular 2. SO I feel your pain! But I promise if you don't give up it will get easier. I love ng2 now. This implementation is going to be a pain in the ass bro. If you need more help let me know. I think you main goal here is to break it down into small tasks. Get each small thing to work then move onto the next thing. If I helped please upvote and accept my answer! – wuno Mar 16 '17 at 16:35
Thanks. I will work on it. I will contact you soon and let you know about progress. Have a great day. – Gregory House Mar 16 '17 at 16:41
I will accept your answer later, if I accept it now some people may get angry and dont reply to my problem. But I have upvoted you. Thanks once again. – Gregory House Mar 16 '17 at 16:43
Try initializing it to 0 to start with. and tell me if it outputs 0 to the console. – wuno Mar 16 '17 at 17:53
Also are you calling it inside the ngOninit method? Please edit your question and post all your code – wuno Mar 16 '17 at 17:54

Getting/setting data into URL --- Angular 2

1 Answers1