Angular compile error using strict templates with @if optional chaining

Question

I'm currently running into an issue/question about optional chaining in Angular. I'm running Angular 20, with "strictTemplates": true enabled as angularCompilerOptions and "strict": true, as compilerOptions.

@if(component().metadata?.title){
  <span>{{ component().metadata?.title }}</span>
}

In the above example, I have a signal input, which has an interface where metadata is an optional field. If I would delete the ? after metadata inside the span element, it would throw an error: Object is possibly 'undefined'. That feels a bit weird, since the @if statement is around it.

I would expect the below code to run fine, but it isn't.

@if(component().metadata?.title){
  <span>{{ component().metadata.title }}</span>
}

Is this the expected behavior? Or can this be resolved?

Naren Murali · Accepted Answer · 2025-11-03 16:55:21Z

1

The issue could be caused due to accessing directly via the signal function in multiple places. The types are evaluated across all signal function calls, hence the types are evaluating separately, hence causing typescript issues. Related Github issue below.

signals: TypeScript and nullability #49161

Instead we can leverage @let or @if(<<cond>>; as propName) to narrow the type once and access them across multiple places.

Using `@let`:

You can also perform type narrowing using @let syntax, if hiding the element is not needed, we can get rid of the @if.

@let metadataTitle = component().metadata?.title;
<span>{{ metadataTitle }}</span>

Using `@if(<<cond>>; as propName)`:

You can use as syntax, do the null check and also use the property inside the if condition.

@if(component()?.metadata?.title; as metadataTitle){
  <span>{{ metadataTitle }}</span>
}

Stackblitz Demo

edited Nov 3 at 16:55

answered Nov 3 at 16:32

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

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

Collectives™ on Stack Overflow

Angular compile error using strict templates with @if optional chaining

1 Answer 1

Using `@let`:

Using `@if(<<cond>>; as propName)`:

Stackblitz Demo

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Using @let:

Using @if(<<cond>>; as propName):

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Using `@let`:

Using `@if(<<cond>>; as propName)`: