title: Angular2, generic overlay component for all other components inside the app
body: <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>