title: Angular2: How to show inner HTML of component-tags inside of component?
body: <p>I have a question for angular2. I'm creating some components and want to have something like this:</p>
  
  <p>This is my DogComponent class:</p>
  
  <pre><code>@Component({
      selector: "dog",
      template: "dog.template.html"
  })
  class DogComponent
  {
      @Input() image: string;
  }
  </code></pre>
  
  <p>And the template in dog.template.html:</p>
  
  <pre><code>&lt;div&gt;
      &lt;!-- Content of &lt;top&gt; should go here --&gt;
      &lt;img class="after" src="dogs/{{image}}" /&gt;
      &lt;!-- Content of &lt;bottom&gt; should go here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I use the DogComponent, it should create the img-tag with the passed src, but also view the other HTML parts before and after the image.</p>
  
  <p>So in the end, if I write this code:</p>
  
  <pre><code>&lt;dog image="garry.png"&gt;
      &lt;top&gt;
          &lt;h1&gt;This is Garry!&lt;/h1&gt;
      &lt;/top&gt;
      &lt;bottom&gt;
          &lt;span&gt;He is my favorite dog!&lt;/span&gt;
      &lt;/bottom&gt;
  &lt;/dog&gt;
  </code></pre>
  
  <p>it should be rendered to this:</p>
  
  <pre><code>&lt;dog&gt;
      &lt;div&gt;
          &lt;h1&gt;This is Garry!&lt;/h1&gt;
          &lt;img src="dog.png" /&gt;
          &lt;span&gt;He is my favorite dog!&lt;/span&gt;
      &lt;/div&gt;
  &lt;/dog&gt;
  </code></pre>
  
  <p>Does someone have the answer to my question?</p>
  
  <p>It would be great!</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Thanks for the advices, so now I updated my snippets and added the <code>DogListComponent</code>. The last snippet (Browser result), should be viewed, if I use the tag <code>dog-list</code> somewhere in my application. Hopefully it's now a little bit clearer.</p>
  
  <p>dog.component.ts</p>
  
  <pre><code>@Component({
      selector: "dog",
      templateUrl: "dog.template.html"
  })
  class DogComponent
  {
      @Input() image: string;
  }
  </code></pre>
  
  <p>dog.template.html</p>
  
  <pre><code>&lt;div&gt;
      &lt;!-- Content of &lt;top&gt; should go here --&gt;
      &lt;img class="after" src="dogs/{{image}}" /&gt;
      &lt;!-- Content of &lt;bottom&gt; should go here --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>dog_list.component.ts</p>
  
  <pre><code>@Component({
      selector: "dog-list",
      templateUrl: "dog-list.template.html"
  })
  class DogListComponent
  {
  }
  </code></pre>
  
  <p>dog-list.template.html</p>
  
  <pre><code>&lt;dog image="garry.png"&gt;
      &lt;top&gt;
          &lt;h1&gt;This is Garry!&lt;/h1&gt;
      &lt;/top&gt;
      &lt;bottom&gt;
          &lt;span&gt;He is my favorite dog!&lt;/span&gt;
      &lt;/bottom&gt;
  &lt;/dog&gt;
  &lt;dog image="linda.png"&gt;
      &lt;top&gt;
          &lt;h1&gt;My little Linda :)&lt;/h1&gt;
      &lt;/top&gt;
      &lt;bottom&gt;
          &lt;span&gt;She is my cutest dog!&lt;/span&gt;
      &lt;/bottom&gt;
  &lt;/dog&gt;
  &lt;dog image="rex.png"&gt;
      &lt;top&gt;
          &lt;h1&gt;And here is Rex!&lt;/h1&gt;
      &lt;/top&gt;
      &lt;bottom&gt;
          &lt;span&gt;DANGEROUS!&lt;/span&gt;
      &lt;/bottom&gt;
  &lt;/dog&gt;
  </code></pre>
  
  <p>Browser result:</p>
  
  <pre><code>&lt;dog-list&gt;
      &lt;dog image="garry.png"&gt;
          &lt;top&gt;
              &lt;h1&gt;This is Garry!&lt;/h1&gt;
          &lt;/top&gt;
          &lt;bottom&gt;
              &lt;span&gt;He is my favorite dog!&lt;/span&gt;
          &lt;/bottom&gt;
      &lt;/dog&gt;
  
      &lt;dog image="linda.png"&gt;
          &lt;top&gt;
              &lt;h1&gt;My little Linda :)&lt;/h1&gt;
          &lt;/top&gt;
          &lt;bottom&gt;
              &lt;span&gt;She is my cutest dog!&lt;/span&gt;
          &lt;/bottom&gt;
      &lt;/dog&gt;
  
      &lt;dog image="rex.png"&gt;
          &lt;top&gt;
              &lt;h1&gt;And here is Rex!&lt;/h1&gt;
          &lt;/top&gt;
          &lt;bottom&gt;
              &lt;span&gt;DANGEROUS!&lt;/span&gt;
          &lt;/bottom&gt;
      &lt;/dog&gt;
  &lt;dog-list&gt;
  </code></pre>