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?

Can you elaborate more ? May be its just me, but I am unable to understand clearly — Shashank Vivek
– Shashank Vivek, Commented Jan 7, 2020 at 9:30
Thanks Dieter. Take a look at the answer & demo code. Since you are new angular, I have put some routing in it to make it more closer to real life example. — Shashank Vivek
– Shashank Vivek, Commented Jan 8, 2020 at 3:59
Sorry for being late on my answer, since I had other work to do unfortunately. We are experimenting with Angular Libraries atm. But the tip with content projection did it :-) — Dieter Köberl
– Dieter Köberl, Commented Jan 16, 2020 at 11:31

Shashank Vivek · Accepted Answer · 2020-01-08 03:58:43Z

3

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!

answered Jan 8, 2020 at 3:58

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

Collectives™ on Stack Overflow

Angular Library using HTML of component of app

EDIT:

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

EDIT:

1 Answer 1

Comments

Related