fix: add show else block to angular (#1398)

* add show else block to angular * fix useTypeOf * snapupdate * changeset --------- Co-authored-by: Sami Jaber <jabersami@gmail.com>
BuilderIO · Apr 23, 2024 · 389018d · 389018d
1 parent c7f2759
commit 389018d
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 10 deletions.
diff --git a/.changeset/tall-knives-buy.md b/.changeset/tall-knives-buy.md
@@ -0,0 +1,5 @@
+---
+'@builder.io/mitosis': patch
+---
+
+support else statements in Angular generator with negation
diff --git a/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.import.test.ts.snap
@@ -2909,6 +2909,12 @@ import { Component, Input } from \\"@angular/core\\";
       <ng-container *ngIf=\\"!conditionB\\">
         <div>if condition A and condition B</div>
       </ng-container>
+      <ng-container *ngIf=\\"!(!conditionB)\\">
+        <div>else-condition-B</div>
+      </ng-container>
+    </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
     </ng-container>
   \`,
 })
@@ -3475,6 +3481,15 @@ import RenderRepeatedBlock from \\"./render-repeated-block.lite\\";
         ></ng-container>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(shouldWrap)\\">
+      <ng-container
+        *ngComponentOutlet=\\"
+              renderComponentTag;
+              inputs: { renderComponentProps: renderComponentProps, };
+              content: myContent;
+              \\"
+      ></ng-container>
+    </ng-container>
   \`,
 })
 export default class RenderBlock {
@@ -3791,6 +3806,7 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"render-styles, RenderStyles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
+    <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
   \`,
 })
 export default class RenderStyles {
@@ -3881,6 +3897,9 @@ import { Component, Input } from \\"@angular/core\\";
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class NestedShow {
@@ -3907,6 +3926,9 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"show-root-text, ShowRootText\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class ShowRootText {
@@ -7613,6 +7635,12 @@ interface Props {
       <ng-container *ngIf=\\"!conditionB\\">
         <div>if condition A and condition B</div>
       </ng-container>
+      <ng-container *ngIf=\\"!(!conditionB)\\">
+        <div>else-condition-B</div>
+      </ng-container>
+    </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
     </ng-container>
   \`,
 })
@@ -8238,6 +8266,15 @@ import type { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(shouldWrap)\\">
+      <ng-container
+        *ngComponentOutlet=\\"
+              renderComponentTag;
+              inputs: { renderComponentProps: renderComponentProps, };
+              content: myContent;
+              \\"
+      ></ng-container>
+    </ng-container>
   \`,
 })
 export default class RenderBlock {
@@ -8573,6 +8610,7 @@ export interface RenderStylesProps {
   selector: \\"render-styles, RenderStyles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
+    <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
   \`,
 })
 export default class RenderStyles {
@@ -8668,6 +8706,9 @@ interface Props {
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class NestedShow {
@@ -8698,6 +8739,9 @@ interface Props {
   selector: \\"show-root-text, ShowRootText\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class ShowRootText {
@@ -9458,6 +9502,9 @@ import { Component } from \\"@angular/core\\";
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
     </ng-container>
+    <ng-container *ngIf=\\"!(show)\\">
+      <button (click)=\\"toggle($event)\\">Show</button>
+    </ng-container>
   \`,
 })
 export default class MyComponent {
@@ -9987,6 +10034,9 @@ import { Component } from \\"@angular/core\\";
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
     </ng-container>
+    <ng-container *ngIf=\\"!(show)\\">
+      <button (click)=\\"toggle($event)\\">Show</button>
+    </ng-container>
   \`,
 })
 export default class MyComponent {

diff --git a/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap b/packages/core/src/__tests__/__snapshots__/angular.mapper.test.ts.snap
@@ -2972,6 +2972,12 @@ import { Component, Input } from \\"@angular/core\\";
       <ng-container *ngIf=\\"!conditionB\\">
         <div>if condition A and condition B</div>
       </ng-container>
+      <ng-container *ngIf=\\"!(!conditionB)\\">
+        <div>else-condition-B</div>
+      </ng-container>
+    </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
     </ng-container>
   \`,
 })
@@ -3554,6 +3560,15 @@ import RenderRepeatedBlockModule from \\"./render-repeated-block.lite/angular\\"
         ></ng-container>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(shouldWrap)\\">
+      <ng-container
+        *ngComponentOutlet=\\"
+              renderComponentTag;
+              inputs: { renderComponentProps: renderComponentProps, };
+              content: myContent;
+              \\"
+      ></ng-container>
+    </ng-container>
   \`,
 })
 export default class RenderBlock {
@@ -3873,6 +3888,7 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"render-styles, RenderStyles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
+    <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
   \`,
 })
 export default class RenderStyles {
@@ -3966,6 +3982,9 @@ import { Component, Input } from \\"@angular/core\\";
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class NestedShow {
@@ -3993,6 +4012,9 @@ import { Component, Input } from \\"@angular/core\\";
   selector: \\"show-root-text, ShowRootText\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class ShowRootText {
@@ -7780,6 +7802,12 @@ interface Props {
       <ng-container *ngIf=\\"!conditionB\\">
         <div>if condition A and condition B</div>
       </ng-container>
+      <ng-container *ngIf=\\"!(!conditionB)\\">
+        <div>else-condition-B</div>
+      </ng-container>
+    </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
     </ng-container>
   \`,
 })
@@ -8421,6 +8449,15 @@ import { RepeatData } from \\"./types.js\\";
         ></ng-container>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(shouldWrap)\\">
+      <ng-container
+        *ngComponentOutlet=\\"
+              renderComponentTag;
+              inputs: { renderComponentProps: renderComponentProps, };
+              content: myContent;
+              \\"
+      ></ng-container>
+    </ng-container>
   \`,
 })
 export default class RenderBlock {
@@ -8759,6 +8796,7 @@ export interface RenderStylesProps {
   selector: \\"render-styles, RenderStyles\\",
   template: \`
     <ng-container *ngIf=\\"foo === 'bar'\\"><div>Bar</div></ng-container>
+    <ng-container *ngIf=\\"!(foo === 'bar')\\"><div>Foo</div></ng-container>
   \`,
 })
 export default class RenderStyles {
@@ -8857,6 +8895,9 @@ interface Props {
         <div>{{item}}</div>
       </ng-container>
     </ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class NestedShow {
@@ -8888,6 +8929,9 @@ interface Props {
   selector: \\"show-root-text, ShowRootText\\",
   template: \`
     <ng-container *ngIf=\\"conditionA\\">ContentA</ng-container>
+    <ng-container *ngIf=\\"!(conditionA)\\">
+      <div>else-condition-A</div>
+    </ng-container>
   \`,
 })
 export default class ShowRootText {
@@ -9671,6 +9715,9 @@ import { Component } from \\"@angular/core\\";
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
     </ng-container>
+    <ng-container *ngIf=\\"!(show)\\">
+      <button (click)=\\"toggle($event)\\">Show</button>
+    </ng-container>
   \`,
 })
 export default class MyComponent {
@@ -10216,6 +10263,9 @@ import { Component } from \\"@angular/core\\";
     <ng-container *ngIf=\\"show\\">
       <button (click)=\\"toggle($event)\\">Hide</button>
     </ng-container>
+    <ng-container *ngIf=\\"!(show)\\">
+      <button (click)=\\"toggle($event)\\">Show</button>
+    </ng-container>
   \`,
 })
 export default class MyComponent {