title: Is there a way to dynamically render different templates for an angular 1.5 component
body: <p>I have a number of angular 1.5 components that all take the same attributes and data structure. I think they could be re-factored into a single component, but I need a way to dynamically choose a template based upon the interpolated value of the <code>type</code> attribute.</p>
  
  <pre><code>var myComponentDef = {
      bindings: {
          type: '&lt;'
      },
      templateUrl: // This should be dynamic based on interpolated type value
  };
  
  angular.module('myModule').component('myComponent', myComponentDef);
  </code></pre>
  
  <p>I can't use the <code>templateUrl function($element, $attrs) {}</code> because the values in the <code>$attrs</code> are uninterpolated so I wouldn't get the type specified in the passed in data.</p>
  
  <p>I could just have one big template with a series of <code>ng-if</code> or <code>ng-switch</code> directives, but I would like to keep the templates separate.</p>
  
  <p>Alternatively, I could just keep the components separate and use <code>ng-switch</code> etc in the parent component, but I don't like this as it seems like a lot of repetition.</p>
  
  <p>I'm looking for a solution where I can use the interpolated <code>type</code> passed into the bindings to match a template url for each type which will then be used to build the component.</p>
  
  <p>Is this possible?</p>
  
  <p>Thanks</p>