Angular template conditional rendering and signal inputs

I have this input:

customHTMLContent = input<string>()


In my HTML template calling this works:

<p>{{ customHTMLContent }}</p>


And this doesn't:

<p>{{ customHTMLContent() }}</p>


Also when using @if this is always truthy (I know it's because the signal itself exists):

@if (customHTMLContent) {
<div [innerHTML]="customHTMLContent"></div>
}


But when trying to access it like this it returns that customHTMLContent is not a function:

@if (customHTMLContent()) {
<div [innerHTML]="customHTMLContent"></div>
}


So what am I getting wrong with how signal inputs should be called in the template? And how do I check if customHTMLContent exists?

Continue reading...