Define and read query parameters with the Angular router

Can you guide or provide link to any informative read on

1. using snapshot vs observables, and why do you choose one over the other?
2. is this angular specific best practice or javascript specific best practice.

thanks

Hey, the main difference is that snapshot is a "resolved" value, while the other options are Observables and thus may provide new values over time. When would that be useful? Well, for instance if your component remains active while the route changes. In those cases you need to subscribe to the observable, to get the new route values and refresh your view accordingly.

For instance, if you have a list of data and whenever you click an entry you navigate to the detail view, then you could rely on the snapshot, since the detail component gets re-created every time you navigate to it. However, if you have some kind of "master-detail" navigation, where you have a list of data and beneath it the detail refreshing based on the list entry the user clicks on, then you need to use an observable. The reason is you need to get notified whenever the URL changes, s.t. you can read the new id and fetch the data accordingly. This video lesson illustrates that scenario.

In general I'd say it's best to use the observable, because often your not sure where your component is being used.

Hope that was helpful.

According to docs: """

Two older properties are still available. They are less capable than their replacements, discouraged, and may be deprecated in a future Angular version.

params—An Observable that contains the required and optional parameters specific to the route. Use paramMap instead.

queryParams—An Observable that contains the query parameters available to all routes. Use queryParamMap instead. """

Thanks, Juri, for that helpful response as to why one would choose to use the snapshot over the observable.