0

i m pretty new in angular2 and i have a question. Is there a way to add more content in a component.ts that was imported from an external file ?

I have a page-header.component in multiple pages that are all the same except i change some titles like this.

<page-header [headerLinks]="['link1', 'link2', 'link3']"></page-header>

page-header.component.html looks like this:

<div class="page-header-links">
<a *ngFor="let headerLink of headerLinks" href="#">{{ headerLink }}</a>
</div>

I would like to expand the page-header-component in my next files and only in this next file. something like this:

<div class="page-header-links">
<a *ngFor="let headerLink of headerLinks" href="#">{{ headerLink }}</a>
</div>

add more content ---
<span class="rectangle-shape"></span>
<h3> title </h3>
<span class="rectangle-shape"></span>
and more

any idea how can i do this?

i tried this but maybe i miss doing something in ts file ?!

 <page-header [headerLinks]="['link1', 'link2', 'link3']">

 <span class="rectangle-shape"></span>
 <h3> title </h3>
 <span class="rectangle-shape"></span>

 </page-header>
Mike Trinh
  • 1,271
  • 2
  • 9
  • 19

2 Answers2

1

You are trying to do right:

<page-header [headerLinks]="['link1', 'link2', 'link3']">
  <span class="rectangle-shape"></span>
  <h3> title </h3>
  <span class="rectangle-shape"></span>
</page-header>

You just need to add <ng-content></ng-content> inside page-header.component.html, like this:

<div class="page-header-links">
  <a *ngFor="let headerLink of headerLinks" href="#">{{ headerLink }}</a>
</div>
<ng-content></ng-content>
Oleg Barinov
  • 1,635
  • 12
  • 7
0

You can use

<div [innerHTML]="somePropertyWithHTML">

but that only adds plain HTML and doesn't resolve any bindings or instantiate Angular2 components or directives for the added HTML.

If you need this see Maybe How to realize website with hundreds of pages in Angular2

Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567