In Angular 17+, how to pass signal<number | undefined> to a child component input...

Say I have two parent & child components respectively:

Parent Component:

@Component({
selector: 'app-parent',
template: `<app-child [id]="id()"></app-child>`, // this gives compilation error
standalone: true
})
export class ParentComponent {
id = signal<number | undefined>;
}


Child component:

@Component({
selector: 'app-child',
standalone: true
})
export class ChildComponent {
id = input.required<number>();
}


Since, child component does not accept undefined value, it gives below error: Type 'number | undefined' is not assignable to type 'number'.

1. 
   I tried wrapping the child element in @if (id() !== undefined) {}. But it still gives the same error because it is a signal and hence can give a different value at different point of time.
   
   
2. 
   I tried creating @let variable and tried passing it to child component, but Angular does not allow temporary variables like these to be passed on.
   

Continue reading...