title: How can I make a structural directive to wrap part of my DOM?
body: <p>I currently have the following line in my HTML: </p>
  
  <pre><code>&lt;p&gt; this is my first line &lt;/p&gt;
  </code></pre>
  
  <p>Using a wrapper directive I want to add a second paragraph and wrap it in a div so it will look like this:</p>
  
  <pre><code>&lt;p wrapper&gt; this is my first line &lt;/p&gt;
  </code></pre>
  
  <p>And then the directive will add the wrapper and second line to make the final HTML look like this:</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt; this is my first line &lt;/p&gt;
      &lt;p&gt; this is my second &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>From what I understand from <a href="https://angular.io/guide/structural-directives#unless" rel="noreferrer">angular.io</a> I will need to create a structural directive and use a TemplateRef and a ViewContainerRef, but I can't find an example on how to use them to wrap an existing part of the dom and add a second line. </p>
  
  <p>I'm using Angular 5 in this project.</p>