Angular — Why you should start using query parameters to improve user friendliness

Query parameters (or query string) is a part of an URL that assigns values to specified parameters. It is not anything special as you may probably have seen it already in some websites. For example, here is an URL with query parameters: https://www.youtube.com/watch?v=dQw4w9WgXcQ, while query parameters refer to the text following the question mark: v=dQw4w9WgXcQ. However, it is definitely one of the most overlooked features in Angular. It is in fact, very important in term of user friendliness.

Image from Action Digital

Why to use query parameters

When building an Angular application, it is very common to have component state.

@Component({
  template: `{{counter}}`
}}
export class TestComponent {
  counter = 1;
}

One characteristic of component state is that it is volatile. Once users leave the application or navigate to other pages, component state is gone. For example, every time when user visits the component above, the counter starts from 1. Synchronizing the state to the URL is the simplest way to let users save their current state whenever they want and resume it later. This is the prerequisite of some modern use cases:

• Resume the page state during page navigation (e.g. clicking the “Previous page” button…