Angular2 Html inside a Component

Question

I want create a component like a template. For example, instead of writing this everywhere:

<div class="myClass">
    <div class="myHeader" id="headerId"> Title </div>
    <div class="myContent" id="contentId"> <<Some HTML code>> </div>
</div>

I want to use a component like:

<my-component title="Title" headerID=headerId contentID=contentID>
    <<Some HTML code>>
</my-component>

How can I implement something like these in Angular2?

What have you tried? What is the problem? How is <<Some HTML code>> related to the question? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 2, 2016 at 12:16
I didn't tried anything since I am not very experienced in Angular2. I googled it but could not find anything similar to what I want. I am looking for suggestions here. — Bünyamin Sarıgül
– Bünyamin Sarıgül, Commented Sep 2, 2016 at 12:19
So what do you want? What is the desired behavior or result? If you just create a simple component, what does it not do what you want? — Günter Zöchbauer
– Günter Zöchbauer, Commented Sep 2, 2016 at 12:20

j2L4e · Accepted Answer · 2016-09-02 12:20:57Z

57

Use <ng-content></ng-content> in your component.

my.component.html

<div class="myClass">
    <div class="myHeader" id="headerId"> Title </div>
    <div class="myContent" id="contentId"> <ng-content></ng-content> </div>
</div>

parent.component.html

<my-component title="Title" headerID=headerId contentID=contentID>
    <<Some HTML code>>
</my-component>

Whatever is inside <my-component></mycomponent> will be rendered in <ng-content></ng-content>

answered Sep 2, 2016 at 12:20

j2L4e

7,0581 gold badge36 silver badges40 bronze badges

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

2 Comments

Bünyamin Sarıgül Over a year ago

That's exactly what I want. Thanks!

Antoniossss Over a year ago

Is there a way to force lazy loading of content? If I conditinally include <ng-content> in my component, all content gets initialized even if condition is false - eg when contents contains some other components.

Collectives™ on Stack Overflow

Angular2 Html inside a Component

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related