Sou diretivas de construção bastante novas com o Angular2. O que eu quero é criar uma diretiva pop-up que envolva o conteúdo com algumas classes css.

Conteúdo

O conteúdo pode ser texto puro e cabeçalhos como:

<div class="data">
    <h2>Header</h2>
    Content to be placed here.
</div>

Então, eu quero atribuir a isso um atributo de diretiva como:Aparecer

<div class="data" popup>
    <h2>Header</h2>
    Content to be placed here.
</div>

O que a diretiva deve fazer é envolver a div dentro, digamos:

<div class="some class">
    <div class="some other class">
        <div class="data">
            <h2>Header</h2>
            Content to be placed here.
        </div>
    </div>
</div>

O caso que descrevi até agora é um atributo ou diretivas estruturais.

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: `[popup]`
})

export class PopupDirective {


}