CODEWITHSUNDEEP
htmlangular
Cem Pamir Bana
Cem Pamir Bana

Reputation: 31

Adding other elemts into Component tag from Angular component

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 :)

Upvotes: 0

Views: 110

Answers (1)

Jordi Riera
Jordi Riera

Reputation: 179

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

Upvotes: 2

Related Questions