Improve template null check for used signals in templates #56303

styriandev · 2024-06-06T12:06:15Z

Which @angular/* package(s) are relevant/related to the feature request?

core

Description

When using a signal in the template, it would be beneficial if the null check is considered for the accessor, reducing the need for repetitive null checks when accessing properties of the object.

Use Case:
Consider the following scenario in an Angular component where a Person object is accessed:

import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

interface Person {
  name: string;
}
@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <div>
      @if(person()) {
        {{ person().name }}
      }
    </div>
  `,
})
export class App {
  name = 'Angular';
  person = signal<null | Person>(null);


}

bootstrapApplication(App);

Right now the @if expression already checks if the person is defined. Therefore I would expect that the person().name expression just works but it is still considered as possibly null. Of course, you could handle this using an @if (person() as personDefined) expression but there are some use cases where it would be easier to just check before if a variable is defined and then access the variable.

The error is the following:

Example URL: https://stackblitz.com/edit/stackblitz-starters-zs2wwy?file=src%2Fmain.ts

Proposed solution

If a signal is checked against null it is not considered as potentially null inside the if statement.

Alternatives considered

Probably a structural let directive or something like that would also help in this matter. But in the end a typesafe check should already be enough.

The text was updated successfully, but these errors were encountered:

JoostK · 2024-06-06T12:36:34Z

We're aware of this and this is being tracked in #49161

JoostK · 2024-06-06T12:37:25Z

Probably a structural let directive or something like that would also help in this matter.

This is also coming in the form of @let (#15280)

angular-automatic-lock-bot · 2024-07-07T00:10:30Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

styriandev changed the title ~~Improve Template Null Check for used signals in templates~~ Improve template null check for used signals in templates Jun 6, 2024

JoostK closed this as not planned Won't fix, can't repro, duplicate, stale Jun 6, 2024

angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 7, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve template null check for used signals in templates #56303

Improve template null check for used signals in templates #56303

Improve template null check for used signals in templates #56303

Improve template null check for used signals in templates #56303

Comments

Which @angular/* package(s) are relevant/related to the feature request?

Description

Proposed solution

Alternatives considered