Angular 2 Component Loader

While developing complex Angular 2 applications, many times we encounter multiple page components, each loading its own data. Instead of blocking the entire screen with a loading message until all the data is loaded, its better to implement this behavior in the component level. This way, each component blocks itself until its own data is loaded, allowing the user to interact with other components during that time.

To achieve this behavior, I've created an attribute directive that can be attached to any component. It has 2 attributes: 

1. The "loading" flag that should be set to true while data is loafing and false once data is loaded. This attribute is mandatory.
2. An optional loading message that replaces the default "Loading..." message.

Note: Since the "loading" directive needs to cover the entire component, its css layout is set to "absolute". That means that the DIV element the directive is attached to must have its layout set to "relative".

See the demo below. The code can be viewed on Github.