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