javascript - Angular Library using HTML of component of app

Question

I am implementing my first angular library.

I want to achieve a header and footer library for angular. The problem is, that it should have the html of the app it is used in. Below you can find the sketch of the HTML code, I want to achieve.

//some header
<pageContent>
</pageContent>
//some footer

The pageContent.component should come from the app where the library is embedded. How do I achieve this?

EDIT:

I am trying to elaborate more:

In my angular library I have a component, which should have a header and a footer. Furthermore, it should show the main content of the page. Therefore, the library needs the input of the pageContent.component. How do I achieve this?

标签： javascripthtmlangulartypescriptangular-library

Answer 1

Thank you for adding more details. Take a look at this demo code for reference

As you can see, I have used ng-content in canvas.component.html as below:

<div id='border'>
   <h3>header</h3>
    <ng-content>
      <!-- Dynamic content goes here -->
    </ng-content>
    <h3>footer</h3>
</div>

The canvas component contains the header and footer as you wanted. I have put some routing in this example to make it more close to what you are looking for.

I hope this has helped you. Cheers!