CODEWITHSUNDEEP
angular
Adithya Shetty
Adithya Shetty

Reputation: 1287

How to show a HTML Dom/ Angular Component inside a Angular component?

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.

Upvotes: 0

Views: 388

Answers (3)

ng-hobby
ng-hobby

Reputation: 2199

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>

Upvotes: 1

Kunal Karmakar
Kunal Karmakar

Reputation: 581

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

Upvotes: 1

joshua miller
joshua miller

Reputation: 1756

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

Upvotes: 2

Related Questions