Some quick ‘hack’ I’ve just found and thought was interesting:

In the old days (some 2 days ago), when I wanted a child to act upon one of it’s ‘@Input()’ change in value, I would have used some observable service, but I have discovered some quirk that would allow you do to so simpler

Instead of setting the input on some value, you will it to a setter method :

let me show you the code

HTML:

In MyComponent:

Now anytime ‘myBooleanValue’ will change you will be able to act upon it.

Why ? Because you might want to display a loader on all http activity: every single time there is a GET, POST, DELETE || PUT request, you might want to display a loader.

So here’s the game plan

  1. Create the Http Interceptor
  2. Create the service that will notify the main component (app.component) there there is some http activity going on.
  3. Adding the interceptor service to App.module
  4. Get a fine looking loader to display with ngClass

I. Creating the http interceptor and the Observable service that will notify app.component

Creating the HTTP Interceptor and the Observable service

II. Inserting the interceptor service inside our module

Pay attention to line 34–36

III. Showing the loader in app.component if there is any Http Activity

Loader only shows if HTTPActivity == true;

IV. Get a fine looking loader

Go here

Yonathan Meguira

Front End Developer | Israel

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store