CODEWITHSUNDEEP
javascripthtmlangulartypescriptangular-library
Dieter Köberl
Dieter Köberl

Reputation: 711

Angular Library using HTML of component of app

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?

Upvotes: 2

Views: 1118

Answers (1)

Shashank Vivek
Shashank Vivek

Reputation: 17504

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!

Upvotes: 3

Related Questions