Angular2, generic overlay component for all other components inside the app
<p>I have the following two components:</p>

<p><strong>overlay</strong></p>

<pre><code>@Component({
    selector: 'overlay',
    template: '&lt;div class="check"&gt;&lt;ng-content&gt;&lt;/ng-content&gt;&lt;/div&gt;'
})
export class Overlay {
    save(params) {
        //bunch of stuff that are commonly used
    }
}
</code></pre>

<p><strong>myComponent (there are many more like this)</strong></p>

<pre><code>@Component({
    selector: 'myComponent',
    directives: [Overlay],
    template: '&lt;overlay&gt;&lt;form (ngSubmit)="save({ name: 'sam', lastName: 'jones' })"&gt;I'm the component. Click &lt;input type="submit"&gt;Here&lt;/input&gt; to save me!&lt;/form&gt;&lt;/overlay&gt;'
})
export class MyComponent {

}
</code></pre>

<p>This solutions doesn't work with no errors thrown, Angular2 simply skips both components initialization. Anyways, i think you get the idea here. There's a common component which will need to wrap a lot of other components hence it needs to be generic. It has a <code>template</code> so services don't do the job. I haven't worked much with custom annotations, maybe they could do something like this? Any thoughts on how to achieve such a functionality?</p>

<p>note: the overlay contains logic and template, both of which are needed for any other component that needs to use it. The template is a complex modal dialog with animations, messages, fades etc... that is common across the solution.</p>

<p><strong>Update</strong></p>

<p>Found this: <a href="https://stackoverflow.com/questions/37584050/angular2-progress-loading-overlay-directive">Angular2: progress/loading overlay directive</a></p>