Narrow Down Angular's Signal Value Type Within an If Statement

In some cases, using the optional chaining operator may not be sufficient to narrow down a signal's value type, such as from string | undefined to string. To achieve type narrowing, you can use Angular's @if directive in combination with a getter expression.

By moving the signal to a private property and exposing its value through a public getter property, you can ensure that TypeScript correctly narrows down the type within the @if block.

This approach guarantees that the same value is used throughout the template, allowing TypeScript to compile the code without errors.