Use same selector in 2 components but different template syntax?

Question

I have 2 components (DetailPage, ListPage) with below template :

<my-detailpage>
 <my-header>{{ text }} </my-header>
 <my-content>{{ content }} </my-content>
</my-detaipage>

<my-listpage>
 <my-header>{{ text }} </my-header>
 <my-content>{{ content }} </my-content>
</my-listpage>

I want to use same selector for header and content ,but the different template base on detail page or list page.

I tried to do this with using providers but not sure if it's the right path.

Any help also good to me, thanks a lot.

Answer 1

Thanks @jayanthCoder, I got your point and update my way for this trouble.

my-header.component.ts

@Component({
    selector: 'my-header',
    template: `<ng-content></ng-content>` ,
    encapsulation: ViewEncapsulation.None
})

my-detailpage.component.ts

<my-detailpage>
    <my-header>Content for detail page : {{ text }} </my-header>
</my-detaipage>

my-listpage.component.ts

<my-listpage>
    <my-header>Content for list page : {{ text }} </my-header>
</my-listpage>

With this solution, I can keep structure of multi component with different case.