Angular2: How to show inner HTML of component-tags inside of component?

Question

I have a question for angular2. I'm creating some components and want to have something like this:

This is my DogComponent class:

@Component({
    selector: "dog",
    template: "dog.template.html"
})
class DogComponent
{
    @Input() image: string;
}

And the template in dog.template.html:

<div>
    <!-- Content of <top> should go here -->
    <img class="after" src="dogs/{{image}}" />
    <!-- Content of <bottom> should go here -->
</div>

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.

So in the end, if I write this code:

<dog image="garry.png">
    <top>
        <h1>This is Garry!</h1>
    </top>
    <bottom>
        <span>He is my favorite dog!</span>
    </bottom>
</dog>

it should be rendered to this:

<dog>
    <div>
        <h1>This is Garry!</h1>
        <img src="dog.png" />
        <span>He is my favorite dog!</span>
    </div>
</dog>

Does someone have the answer to my question?

It would be great!

Edit:

Thanks for the advices, so now I updated my snippets and added the DogListComponent. The last snippet (Browser result), should be viewed, if I use the tag dog-list somewhere in my application. Hopefully it's now a little bit clearer.

dog.component.ts

@Component({
    selector: "dog",
    templateUrl: "dog.template.html"
})
class DogComponent
{
    @Input() image: string;
}

dog.template.html

<div>
    <!-- Content of <top> should go here -->
    <img class="after" src="dogs/{{image}}" />
    <!-- Content of <bottom> should go here -->
</div>

dog_list.component.ts

@Component({
    selector: "dog-list",
    templateUrl: "dog-list.template.html"
})
class DogListComponent
{
}

dog-list.template.html

<dog image="garry.png">
    <top>
        <h1>This is Garry!</h1>
    </top>
    <bottom>
        <span>He is my favorite dog!</span>
    </bottom>
</dog>
<dog image="linda.png">
    <top>
        <h1>My little Linda :)</h1>
    </top>
    <bottom>
        <span>She is my cutest dog!</span>
    </bottom>
</dog>
<dog image="rex.png">
    <top>
        <h1>And here is Rex!</h1>
    </top>
    <bottom>
        <span>DANGEROUS!</span>
    </bottom>
</dog>

Browser result:

<dog-list>
    <dog image="garry.png">
        <top>
            <h1>This is Garry!</h1>
        </top>
        <bottom>
            <span>He is my favorite dog!</span>
        </bottom>
    </dog>

    <dog image="linda.png">
        <top>
            <h1>My little Linda :)</h1>
        </top>
        <bottom>
            <span>She is my cutest dog!</span>
        </bottom>
    </dog>

    <dog image="rex.png">
        <top>
            <h1>And here is Rex!</h1>
        </top>
        <bottom>
            <span>DANGEROUS!</span>
        </bottom>
    </dog>
<dog-list>

Answer 1

So I found my solution! I need to use <ng-content>.

dog.template.html looks like this:

<div>
    <ng-content select="top"></ng-content>
    <img class="after" src="dogs/{{image}}" />
    <ng-content select="bottom"></ng-content>
</div>

Then it will insert the specified <top>-tags and <bottom>-tags in my div.

Answer 2

Look like you misunderstand the selector role. The selector <dog></dog> will be used by other components (AppComponent for example) to display your dog component HTML. So, there is no point to use the selector in his own component HTML.

Also, if you want to use external file as template, the syntax is templateUrl and not template. so :

@Component({
selector: "dog",
templateUrl: "dog.template.html" // make sure the path to the file is correct

In your dog.template.html, just put your HTML code:

<div>
    <h1>This is Garry!</h1>
    <img src="dogs/{{image}}" /> 
    <!-- the component deliver the value image (dog.png) to your template -->
    <span>He is my favorite dog!</span>
</div>

Edit to respond to your updated code. If I understand well, you have an array of dogs pictures accessible from dog_list.component.ts. You use them in your template with something like *ngFor="let picture of pictures". You don't say how your data looks like but maybe you can try this if you have an array formated like arr = [{'topTile':'This is Garry!', 'picture': 'garry.png', 'bottomTitle':'He is my favorite dog!' }, {}, ...]

 <!-- Parent component template (dog_list) --> 
   <div *ngFor="let data of arr">
        <top>
            <h1>{{ data.topTitle }}</h1> <!-- This is Garry!, ... -->
        </top>
        <dog [image]="data.picture"></dog><!-- Bind data to children component dog with value garry.png -->
        <bottom>
            <span>{{ data.bottomTitle }}</span> <!-- He is my favorite dog!,... -->
        </bottom> 
    </div>

For more detail, maybe angular template syntax docs could help : https://angular.io/docs/ts/latest/guide/template-syntax.html