0

I have a simple component named rectangle with a simple css. Now I need to show a element example a div or another component inside that component. How would I achieve this?


I tried doing:

<app-rectangle>
  <div>
   ...
 </div>
</app-rectangle>

and nothing showed up as the output.

3 Answers 3

2

What you are trying to achieve is called Content Projection.

In the template of the <app-rectangle> component add the following:

<ng-content></ng-content>

Your div should automatically appear within those tags.

See more here: https://angular.io/guide/lifecycle-hooks#responding-to-projected-content-changes

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

Comments

1

You can achieve this using <ng-content></ng-content> I believe you are looking for something similar that was asked here.

Comments

1

Add <ng-content></ng-content> to the component's template where the content should be projected, Here I created a sample on Stackblitz for you

hello.component.html

<h1>Hello from Component</h1>
<ng-content></ng-content>

app.component.html

<hello>
  <h1>Hello between component</h1>
</hello>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.