How to create global preloader to all components. Angular 2

Question

I need to create a component which will add preloader (image with semi-transparent background) to all components, which loading or fetching data from service. I have some routable blocks on page. And I need to show preloader over the block, which working in the moment. Which of events should I handle? And how to make it globaly? Thank you.

Answer 1

I think you could start by creating a custom directive for eg <my-loader></my-loader> and in that component you could add your Preloader, images etc then by simply adding it to any of your component view by including it in directive[] . Hope this answers as the question itself is quite abstract , some snippet would definitely help.