title: Angular / Kendo Grid: "HTML Helper" Equivalent / Sub-Template for Grid Columns?
body: <p>I'm wondering if there's an equivalent to Razor Helper / ASP.NET MVC HTML Helpers in Angular.</p>
  
  <p>The scenario: I have chunks of HTML that I want to be able to store in a single place, so I can put them within the same component multiple times without having to copy/paste the code a lot.</p>
  
  <p>Why Components won't work: The sections of HTML I want to chunk out, are within a larger component's HTML. And that component expects only specific child components to exist. In this case, it is <a href="https://www.telerik.com/kendo-angular-ui/components/grid/" rel="nofollow noreferrer">Kendo Grid</a>.</p>
  
  <p>In a typical Kendo Grid for Angular, the HTML looks something like this:</p>
  
  <pre><code>&lt;kendo-grid [data]="gridData" [height]="410"&gt;
      &lt;kendo-grid-column field="ProductID" title="ID" width="40"&gt;&lt;/kendo-grid-column&gt;
  &lt;/kendo-grid&gt;
  </code></pre>
  
  <p>In my scenario, I have a collection of <code>kendo-grid-column</code> that are essentially repeated. It would be great if I could section them off to their own piece, that I could invoke multiple times:</p>
  
  <pre><code>&lt;kendo-grid [data]="gridData" [height]="410"&gt;
      &lt;app-some-complicated-set-of-columns [data]="childCollection1"&gt;&lt;/app-some-complicated-set-of-columns&gt;
      &lt;app-some-complicated-set-of-columns [data]="childCollection2"&gt;&lt;/app-some-complicated-set-of-columns&gt;
      &lt;app-some-complicated-set-of-columns [data]="childCollection3"&gt;&lt;/app-some-complicated-set-of-columns&gt;
  &lt;/kendo-grid&gt;
  </code></pre>
  
  <p>Unfortunately, Kendo does not render the columns within that component. I attempted to do the same within a <code>&lt;kendo-grid-column-group&gt;</code> element, but if you try that, it throws an error instead of simply not rendering them. Something to the effect of "you can only put <code>&lt;kendo-grid-column&gt;</code> component instances inside <code>&lt;kendo-grid-column-group&gt;</code>."</p>
  
  <p><strong>While there probably isn't a way around either of these, I would love to hear if there are any ways in Angular to essentially say "replace this with a section of HTML directly, as if it were written inline."</strong> Solutions to either the specific Kendo problem, or the more generic Angular problem, are welcome.</p>