2

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.

parvezalam khan
  • 480
  • 2
  • 11
Thien Hoang
  • 625
  • 3
  • 12

2 Answers2

0

Use an attribute for my-header and my-content to differentiate.

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

<my-listpage>
 <my-header pagetype="listpage">{{ text }} </my-header>
 <my-content pagetype="listpage">{{ content }} </my-content>
</my-listpage>
jayanthCoder
  • 615
  • 1
  • 6
  • 13
  • Are there any ways to creating 2 components "my-header" and provider on different case ? – Thien Hoang Apr 21 '17 at 09:24
  • my-header is the same component. Just have an attribute specific to each detail page or listpage. Inside the code for my-header, check that attribute and specifically handle for each listpage or detail-page – jayanthCoder Apr 21 '17 at 09:37
0

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.

Thien Hoang
  • 625
  • 3
  • 12