Angular 2 include component html in a component inherited template

Question

I have a component A with its html/ts file. When I inherit a second component B from A, this will take all properties and method on the first. If I want to use the component A html, I can reference the comp A html in the templateUrl property.

I have a problem. I want use the component A html, but I want extend it. So my idea is "include" the first component html to the second. It's possible in Angular2? Is there another way?

I don't want to create an instance of component A in the component B. I want only the html markup.

EDIT:

In this example there is my problem:

https://stackblitz.com/edit/ng-content-projection-lzjwea

when I inherited the Hello2 ts, If I create an instance of hello component in hello2 html, it take its name property. I found three solutions:

Change all properties that need to be used in all inherit component to input and inject the
Duplicate html code
Find a way to reference the html of first component without creating an instance of it.

I think the best solution is the third. But I don't know a way to do it..

unfortunally no.. i created a example to show to you the problem in the main post — Steph8
– Steph8, Commented Dec 12, 2017 at 13:44

cyberpirate92 · Accepted Answer · 2017-12-12 13:22:37Z

2

ng-content could be used to project dynamic content in a component.

For example, consider the following

hello.component.html

<div id='border'>
    <h1>Base Component</h1>
    <p>ng-content could be used for projecting dynamic content within a component</p>
    <ng-content>
        <!-- Dynamic content goes here -->
    </ng-content>
</div>

So, now whatever that is in between

<hello>
    <!-- dynamic html here -->
</hello>

app.component.html

<hello>
  <div style="border: 2px solid red">
    <h2>Child Component</h2>
    <button id="sample1"> Sample 1 </button>
    <button id="sample2"> Sample 2 </button>
  </div>
</hello>

Example

Hope this helps

answered Dec 12, 2017 at 13:22

cyberpirate92

3,1865 gold badges30 silver badges48 bronze badges

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

1 Comment

Steph8 Over a year ago

i know ng-content, but can't resolve my problem. I created a example to show to you my problem. It is in the main problem.

Collectives™ on Stack Overflow

Angular 2 include component html in a component inherited template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related