Построение директивы обертки (обернуть некоторый контент / компонент) в angular2

Я довольно новые строительные директивы с Angular2. Я хочу создать всплывающую директиву, которая обернет содержимое некоторыми классами CSS.

содержание

Контент может быть простым текстом и заголовками, такими как:

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

Затем я хочу дать этому атрибуту директивы, например:неожиданно возникнуть

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

Что директива должна сделать, это обернуть div внутри, скажем:

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

Случай, который я описал, это атрибут или структурные директивы.

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

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

export class PopupDirective {


}

Ответы на вопрос(2)

Ваш ответ на вопрос