title: Angular directive to simplify sorting
body: <p>I have a list/table of persons, that i can sort by firstname, lastname, etc.</p>
  
  <p>When i click on a heading (say firstname) it route with a querystring parameter
  <code>?sort=firstname</code>, and if i click it again it will change the param to
  <code>?sort=firstname-desc</code>. At the same time, i need an icon to show an up or down arrow next to the parameter, indicating ascending or descending sorting. This is a pretty standard sorting scenario.</p>
  
  <p>My current template looks like this:</p>
  
  <pre><code>&lt;div class="heading"&gt;
      First name
      &lt;a [routerLink] [queryParams]="sortParams('firstname')"&gt;
          &lt;img src="assets/icons/icon-sort-down.svg" class="icon-normal" [class.flip]="showFlip('firstname')"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This works fine, because I have some logic in the component to handle <code>sortParams</code> and <code>showFlip</code> but i would like to simplify it, so i can easily add the same logic to multiple fields, and on multiple views, without the need for the extra duplicated component logic.</p>
  
  <p>Creating a directive seems the way to go, but when i create directives, i normally only modify dom attributes using the <code>@HostBinding</code>. How would it be possible to write a directive (call it sorting) that would allow me to define the template like this instead:</p>
  
  <pre><code>&lt;div class="heading"&gt;
      First name
      &lt;a [sorting]="'firstname'"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The directive would need to modify the a tag to include <code>routerLink</code> and <code>queryParams</code>, as well as add some non-static template content. I know i can inject <code>ViewContainerRef</code> in my directive, but from there, my directive knowledge needs some help.</p>