BuilderIO / BuilderIO/mitosis

Conditionally checking for slot prop does not work in angular

Open
#866 1 comment 0 reactions 0 assignees View on GitHub
bug
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.