title: Building a wrapper directive (wrap some content / component) in angular2
body: <p>I'm pretty new building directives with Angular2. What I want is to create a popup directive that will wrap the content with some css classes.</p>
  
  <p><strong>Content</strong> </p>
  
  <p>Content can be pure text and headers like:</p>
  
  <pre><code>&lt;div class="data"&gt;
      &lt;h2&gt;Header&lt;/h2&gt;
      Content to be placed here.
  &lt;/div&gt;
  </code></pre>
  
  <p>Then I want to give this a directive attribute like: <strong>popup</strong></p>
  
  <pre><code>&lt;div class="data" popup&gt;
      &lt;h2&gt;Header&lt;/h2&gt;
      Content to be placed here.
  &lt;/div&gt;
  </code></pre>
  
  <p>What the directive should do, is to wrap the div inside, lets say:</p>
  
  <pre><code>&lt;div class="some class"&gt;
      &lt;div class="some other class"&gt;
          &lt;div class="data"&gt;
              &lt;h2&gt;Header&lt;/h2&gt;
              Content to be placed here.
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The case i described so far, is this a attribute or structural directives.</p>
  
  <pre><code>import { Directive, ElementRef, HostListener, Input } from '@angular/core';
  
  @Directive({
    selector: `[popup]`
  })
  
  export class PopupDirective {
  
  
  }
  </code></pre>