Angular 2 Adding more html codes for imported component

Question

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>

Oleg Barinov · Accepted Answer · 2016-07-18 09:40:40Z

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>

answered Jul 18, 2016 at 9:40

Oleg Barinov

1,66513 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:46:44Z

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

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Jul 18, 2016 at 9:24

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

Angular 2 Adding more html codes for imported component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related