title: Can I do two things at once in a structural directive?
body: <p>I'd like to create a structural directive which behaves as follows:</p>
  
  <pre><code>&lt;p *myDirective="condition"&gt;This is some text&lt;/p&gt;
  </code></pre>
  
  <ul>
  <li>If <code>condition</code> is <code>false</code> then the <code>&lt;p&gt;</code> tag is <strong>not</strong> rendered at all.</li>
  <li>If <code>condition</code> is <code>true</code> then the <code>&lt;p&gt;</code> tag is rendered with an extra <code>class</code> attribute.</li>
  </ul>
  
  <p>So, either there's <em>nothing</em> rendered, or:</p>
  
  <pre><code>&lt;p class="my-added-class"&gt;This is some text&lt;/p&gt;
  </code></pre>
  
  <p>In other words, it's a bit like <code>*ngIf</code>, but with additional behaviour.</p>
  
  <p>I can find examples of how to do the include/exclude behaviour (in fact there is such an example <a href="https://angular.io/guide/structural-directives#write-a-structural-directive" rel="noreferrer">in the Angular docs</a>). I can also find examples of how to add a class to an element <a href="https://stackoverflow.com/a/43820610/98422">using the <code>Renderer2</code> API</a>.</p>
  
  <p>However, I don't see how I can combine these techniques, because the first method manipulates the <code>viewContainer</code> to create an embedded <em>view</em>, whereas the second method uses the renderer to manipulate an <em>element</em>.</p>
  
  <p><strong>Is there a way to do this?</strong> Can I somehow create the embedded view and then manipulate the elements it creates? Or can I manipulate the template to change how the view is rendered?</p>
  
  <p>[NOTE: <code>@HostBinding</code> does not work with structural directives, so that's not an option]</p>