Is it possible to set default value to <ng-content> [duplicate]

Question

I was just learning the use of Transluction in angular2 from this tutorial:

https://scotch.io/tutorials/angular-2-transclusion-using-ng-content

I was able to use the <ng-content> tag for some content like:

<ng-content select="[my-block-header]"></ng-content>

and it lies in component where my-block selector is attached.

It renders the content from my other component as:

<my-block>
    <div class="box-header" my-block-header> <--added the slot selector here
        <h3 class="box-title">
            My title
        </h3>
    </div>
</my-block>

The issue is:

Is it possible to add the default value to the <ng-content> block which could be used if we didn't pass any value?

As for now if there is no value passed there will be blank page in it's position.

Edit:

When i was trying to test there was newer version of zone.js which was not allowing the correct error to be displayed, therefore i was getting the error as:

Cannot set property 'stack' of undefined ; Zone: <root> ; 
Task: Promise.then ; Value: TypeError: Cannot set property 'stack' of undefined

But when i changed the version of zone.js to 0.7.2 the error was clearly mentioned in the console as:

zone.js:392 Unhandled Promise rejection: Template parse errors:
<ng-content> element cannot have content.

So, it confirms that there can't be any default value set to <ng-content>

Galosh

Does this answer your question? In Angular 2 how to check whether <ng-content> is empty? – Variegation

Answer 1

From angular 10 the following works:

<div #ref><ng-content></ng-content></div>
<ng-container *ngIf="!ref.hasChildNodes()">
   Default Content
</ng-container>

It simply means, if the div ref doesn't have any child nodes (That means, ng-content is empty), then render the ng-container having the "Default Content".

Normalcy

Answer 2

Just Use:

<ng-content #myBlockHeader select="[my-block-header]"></ng-content>
<div *ngIf="!myBlockHeader">Default Content</div>

Horseweed

This solution does not work for me (angular 9). There are several working solutions here: #35107711 – Variegation

Answer 3

What if you put some markup within the <ng-content> tag?

<ng-content select="[my-block-header]">
  <p>Some default markup here</p>
</ng-content>

Maleficence

It gives me the error as: Cannot set property 'stack' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot set property 'stack' of undefined – Galosh

Bummer. Then, I don't know how to proceed. – Maleficence

We cannot set the default value on the <ng-content>. Now the error message clearly mentions it: <ng-content> element cannot have content. – Galosh

With ViewEncapsulation.Native you can use the <content> or <slot> element. <content> supports default content, don't know about <slot>. Native is currently not well supported though. Especially styling can become a problem because >>> or /deep/ won't work anymore. – Cask

Is there any better options than using <content>? I have got the default values using <content> but it doesn't let me override unless i use ViewEncapsulation.Native and as you told earlier it is breaking my stylings too :( – Galosh