Building a wrapper directive (wrap some content / component) in angular2
<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>