Using search params in GET calls - lordoftheflies/angular-essential-training GitHub Wiki

The GET Call in the media items service is currently requesting all media items. Let's refactor that to support URL search query values and see how the angular HTTP service works with those. The HTTP client GET method supports a second parameter for options that can be used to include search query data. The mock backend supports filtering the media items list by medium so let's update the service GET method in the media-item.service.ts file to take in a parameter named medium. Then in the method, we need to create a new variable named GET options, setting that to an object literal. One of the option properties that the GET method can look for is the name params. This can be an object literal that has properties and values that represent the query params that would be in an HTTP GET Call. So we can add a property named params and set that equal to an object literal. Since the backend supports a query param named medium, we can add a property in that object named medium and set that to the medium variable that we added to this component method signature. We can actually shorten this up a bit by making use of a shorthand property name. Since the variable name of medium is the same as the property name, we can just put medium without the colon space medium. Then we can use that second argument on the HTTP GET method for the request options. So let's pass in GET options there. Okay, that takes care of medium support in the service. Let's switch over to the medium-item-list.component.ts file. This class has already been refactored a bit to support a medium option and to include some links in the template. All we need to do here is update the this.mediumitemservice.getmethodcall to pass in the medium. Then we can switch over to the browser and see the GET query parameters in action by clicking through the new links.