Adding other elemts into Component tag from Angular component

Question

I have an Angular Component, the HTML looks something like this:

<!Doctype HTML>
<html>
<body>
<div class="main">
  <div [ngClass]="{'parent' : loading, 'parent-no-anim': !loading}">
   <div class="child">
   </div>
  </div>
</div>
</body>
</html>

And I implement that Component in another Component like this:

<app-mat-loading-card [loading]="device.loading || device.connecting">

Now I want to add other things in this Tag aswell, like a regular Span or something.

<app-mat-loading-card [loading]="device.loading || device.connecting">
<span class="button-title">{{device.deviceName}}</span>
</app-mat-loading-card>

I tried looking in Chrome Dev Tools, but I did not found anything in that Component Tag.

But whatever I try, nothing gets displayed. Whatever I put in that Component Tag, disappears. It would be kind if anyone could help me out, thanks :)

Jordi Riera · Accepted Answer · 2023-02-05 23:41:37Z

2

In angular, whatever you put between the component tags will disappear as default behaviour. You can however project what is between the component tags inside the component itself. This is normally handled with the <ng-content> tag.

What you put between the component tags will show up in place of the ng-content tags.

Official Docs on content projection: https://angular.io/guide/content-projection

An article I wrote about it, with examples: https://dev.to/renaisense_/angular-content-projection-and-solid-code-ng-content-5940

Hope this helps in guiding you to the right approach

answered Feb 5, 2023 at 23:41

Jordi Riera

1894 bronze badges

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

1 Comment

Cem Pamir Bana Over a year ago

MAN I THANK YOU SO MUCH, I SPENT HOURS TRYING TO SOLVE THIS!!!

Collectives™ on Stack Overflow

Adding other elemts into Component tag from Angular component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related