Conditionally checking for slot prop does not work in angular
- Dominant language
- TypeScript
- Stars
- 14.4k
- Forks
- 671
- PR merge metrics
- No merged PRs in 30d
Description
### I am interested in helping provide a fix!
Yes
### Which generators are impacted?
- [ ] All
- [X] Angular
- [ ] HTML
- [ ] Qwik
- [ ] React
- [ ] React-Native
- [ ] Solid
- [ ] Stencil
- [ ] Svelte
- [ ] Vue
- [ ] Web components
### Reproduction case
https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUYcmFQBKRBLhwo6GMigHb7h5wADwswABuAHyBQYgOEE4cqEwQMAAyOHToTHAAZLlwAbGxoRFw2kw4qKgAcjgg6AC8AOT4MjAAtHRVBG2dAOZQOMYdAMwADOPN0cXFCPGJyakZWUyEMcXBPGFRGx7O6yXbETNwzpKEQA%3D
### Expected Behaviour
This mitosis code does not work in angular. (Conditionally checking for a slotProp)
e.g
```tsx
{props.slotLabel && (
{props.slotLabel}
)}
```
The template output is correct
```tsx
```
However... `slotLabel` is not an input property on
```tsx
export class MyComponent {}
```
So the condition will always be false meaning that part will never render.
### Actual Behaviour
This mitosis code will not work in angular
```tsx
{props.slotLabel && (
{props.slotLabel}
)}
```
### Additional Information
If we write the above code like this
```tsx
{props.slotLabel}
```
That works but if the `slotLabel` is not provided we get the extra div in the template which is not what we want.
Contributor guide
Research direction
Start with the linked Mitosis reproduction and compare its Angular template with the generated MyComponent class. Trace how the Angular generator handles a conditional slot prop such as props.slotLabel, then verify that the slot content renders only when supplied and that no extra div appears when it is absent.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- compilers, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100