CODEWITHSUNDEEP
angular
di99er
di99er

Reputation: 73

Component with many templates

I need create a component with two template. One to display a title and an other for body.

My main view use this component.

<extended-component>
    <ng-template>
        Title
    </ng-template>
    <ng-template>
        Body
    </ng-template>
</extended-component>

The component

import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
import { PagedResults } from './pagedresults';
import { ColumnDefinition } from './columndefinition';

@Component({
    selector: 'extended-component',
    queries: {
        headerTemplate: new ContentChild(TemplateRef),
        bodyTemplate: new ContentChild(TemplateRef)
    },
    templateUrl: './extended-component.html'
})
export class ExtendedComponent {
}

The template of this component

<table>
    <thead>
        <tr>
            <td>
                <ng-template *ngTemplateOutlet="headerTemplate">
                </ng-template>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <ng-template *ngTemplateOutlet="bodyTemplate">
            </ng-template>
        </tr>
    </tbody>
</table>

The build and execution work, but i have not the expected result, because 'Title' display twice.

If I remove the second template of my main view. I have only one 'Title'

How to link the second template between my main view and my component ? I think my problem is here, I don't know how to select the second template: 

        bodyTemplate: new ContentChild(TemplateRef)

Upvotes: 0

Views: 109

Answers (1)

RemyaJ
RemyaJ

Reputation: 5526

Try this, you can use ng-container.

   <extended-component>
    <ng-container class="title">
       Title
    </ng-container>
    <ng-container class="body">
       Body
    </ng-container>
    </extended-component>

<table>
    <thead>
        <tr>
            <td>
                <ng-content select=".title"></ng-content>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <ng-content select=".body"></ng-content>
        </tr>
    </tbody>
</table>

Upvotes: 2

Related Questions