Is it possible to set default value to

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>

Does this answer your question? [In Angular 2 how to check whether is empty?](https://stackoverflow.com/questions/35107211/in-angular-2-how-to-check-whether-ng-content-is-empty) — rh16, Mar 27 '20 at 00:45

Deb · Answer 1 · 2023-08-09T10:05:59.950

20

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".

edited Aug 09 '23 at 10:05

answered Feb 04 '21 at 18:47

Deb

5,163
7
30
45

score 7 · Answer 2 · answered Oct 03 '19 at 13:19

7

Just Use:

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

answered Oct 03 '19 at 13:19

Mike

741
13
40

4

This solution does not work for me (angular 9). There are several working solutions here: https://stackoverflow.com/questions/35107211/in-angular-2-how-to-check-whether-ng-content-is-empty – rh16 Mar 27 '20 at 00:44

score -8 · Answer 3 · answered Jan 24 '17 at 10:22

-8

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>

answered Jan 24 '17 at 10:22

AngularChef

13,797
8
53
69

It gives me the error as: `Cannot set property 'stack' of undefined ; Zone: ; Task: Promise.then ; Value: TypeError: Cannot set property 'stack' of undefined` – PaladiN Jan 24 '17 at 10:24
Bummer. Then, I don't know how to proceed. – AngularChef Jan 24 '17 at 10:33
3

We cannot set the default value on the . Now the error message clearly mentions it: ` element cannot have content.` – PaladiN Jan 26 '17 at 12:59
With `ViewEncapsulation.Native` you can use the `` or `` element. `` supports default content, don't know about ``. `Native` is currently not well supported though. Especially styling can become a problem because `>>>` or `/deep/` won't work anymore. – Günter Zöchbauer Jan 26 '17 at 13:22
Is there any better options than using ``? I have got the default values using `` but it doesn't let me override unless i use `ViewEncapsulation.Native` and as you told earlier it is breaking my stylings too :( – PaladiN Jan 27 '17 at 07:34

Is it possible to set default value to

3 Answers3