[RxJS] Reactive pattern: Passing Observable and trigger side effect until it complete

For example, we want to show loading spinner inside our appliction component trees. Because we might trigger loading spinner anywhere inside our application, therefore, we need to use a loading.service.ts to communciate between different compnents.

loading.service.ts:

Component:

The most important thing to understand here is the function: showLoaderUntilComplete(obs$). 

It takes a Observable, because we want to wait 'obs$' to complete, therefore, we use 'concatMap', it executes observable one by one, then we use 'finalize' operator, it will execute callback function when the observable completes. Here means waiting 'obs$' to be completed.

How to use it?

courses.service.ts