Typical Use Cases Observed Objects In Components In Angular 4

Typical Use Cases Observed Objects In Components And Services In Angular 4

We are presenting to your attention the typical options of using Observable objects in components and services of Angular 4.

Task: When you open the example.com/#/users/42 page, by userId retrieve the user’s data.

Solution: When initializing the UserDetailsComponent components, we subscribe to the router parameters. That is if userId will change – the bumper will trigger our subscription. Using the received userId, we from the userService service get Observable with user data.

Note that the created subscriptions to the router, when the object is destroyed, are deleted, followed by an angular, so you do not need to unsubscribe from the router parameters:

The Router manages the observables it provides and localizes the subscriptions. The subscriptions are cleaned up, when the component is closed, protecting against memory leaks, so we do not need to unsubscribe from the route params Observable. Mark Rajcok

Task: Show the download icon after you start saving data and hide it when data is saved or an error occurs.

Solution: For loading the loader, the loading variable responds, after clicking on the button, set it to true. And to set it to false, we use Observable.finally the functions that are executed after the subscription is completed or if an error occurred.

That is, not to lose memory on hot subscriptions, the component will work until the value of ngUnsubscribe does not change. And it will change when ngOnDestroy is called. The pros of this option are that in each of the subscriptions it is enough to add just one line so that the answer works on time.

Task: Show page suggestions when entering data on a form

Solution: Let’s subscribe to the change of the form data, take only the changing data of the intuitive, put a small delay so that events are not too much and send a request to Wikipedia. The result is output to the console. An interesting point is that switchMap will cancel the previous query if new data has arrived. This is very useful for avoiding non-fire effects from slow queries, if, for example, the penultimate query was 2 seconds long, and after 0.2 seconds, the result of the last request will be displayed in the console.

Solution: Use the bindings publishReplay and refCount. The first function caches one function value for 2 seconds, and the second will count the created subscriptions. That is, Observable will end when all subscriptions are executed. Here you can read more.

Paul Brook is a professional full stack developer & IT content marketer. Developer by day and a content Marketer by night. He is the lead Developer and content marketer at www.smartspate.com. His passion for helping people in all aspects IT and Marketing flows through in the expert industry coverage he provides. In addition to IT, also provide technical SEO and copywriting services for business of all sizes.

Find Us At:

error: This Content is Protected! All Rights belong to Smart Spate Ltd.

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. For information on a cookie and how it impacts on users, you can visit our Privacy Policy and Cookie Policy.AcceptCloseRead more