fix: Support banana in a box.

The output was invalid javascript.
Ex:
`ɵɵtwoWayBindingSet(ctx.test, $event) || (ctx.test = $event);`
The parenthesis were missing on the right hand side of the boolean operator.

Author: JeanMeche

angular.json

@@ -16,9 +16,6 @@
             "outputPath": "dist/angular-compiler-output",
             "index": "src/index.html",
             "browser": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
             "tsConfig": "tsconfig.app.json",
             "assets": [
               {

src/app/app.component.ts

@@ -3,7 +3,6 @@ import {
   Component,
   effect,
   ElementRef,
-  Host,
   HostListener,
   inject,
   signal,
@@ -12,7 +11,7 @@ import {
 } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import { MatIcon, MatIconRegistry } from '@angular/material/icon';
+import { MatIcon } from '@angular/material/icon';
 
 import { compileFormatAndHighlight } from './compile';
 import { formatAngularTemplate } from './prettier';
@@ -110,7 +109,12 @@ import { unzip, zip } from './zip';
           <ul>
             <li>&#64;Defer is not supported yet</li>
             <li>i18n is not supported yet</li>
-            <li><a href="https://github.com/JeanMeche/angular-compiler-output/issues">Probably some other issues</a>...</li>
+            <li>
+              <a
+                href="https://github.com/JeanMeche/angular-compiler-output/issues"
+                >Probably some other issues</a
+              >...
+            </li>
           </ul>
           <h2>More on the Angular compiler</h2>
           <p>
@@ -121,7 +125,12 @@ import { unzip, zip } from './zip';
         </div>
 
         <br /><br /><br />
-        <p>Repo <a href="https://github.com/jeanmeche/angular-compiler-output">here</a></p>
+        <p>
+          Repo
+          <a href="https://github.com/jeanmeche/angular-compiler-output"
+            >here</a
+          >
+        </p>
         <span class="twitter">
           Built by
           <a href="https://twitter.com/Jean__meche">&#64;JeanMeche</a> with the
@@ -144,8 +153,7 @@ export class AppComponent {
     read: ElementRef,
   });
 
-  constructor(private matIconReg: MatIconRegistry) {
-    this.matIconReg.setDefaultFontSetClass('material-symbols-outlined');
+  constructor() {
     effect(() => {
       this.compileTemplate(this.template());
     });

src/app/app.config.ts

@@ -1,11 +1,14 @@
 import {
   APP_INITIALIZER,
   ApplicationConfig,
+  ENVIRONMENT_INITIALIZER,
+  inject,
   provideExperimentalZonelessChangeDetection,
 } from '@angular/core';
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideRouter } from '@angular/router';
 import { initHightlighter } from './compile';
+import { MatIconRegistry } from '@angular/material/icon';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -17,5 +20,14 @@ export const appConfig: ApplicationConfig = {
       useValue: async () => await initHightlighter(),
       multi: true,
     },
+    {
+      provide: ENVIRONMENT_INITIALIZER,
+      useFactory: () => () => {
+        const matIconReg = inject(MatIconRegistry);
+        matIconReg.setDefaultFontSetClass('material-symbols-outlined');
+      },
+      multi: true,
+      deps: [MatIconRegistry],
+    },
   ],
 };

src/app/printer.ts

@@ -86,7 +86,6 @@ export class Printer implements ng.ExpressionVisitor, ng.StatementVisitor {
   }
 
   visitIfStmt(stmt: ng.IfStmt, context: Context): string {
-    console.log(stmt);
     let ifStmt = 'if (';
     ifStmt += stmt.condition.visitExpression(this, context);
     ifStmt +=
@@ -390,7 +389,9 @@ export class Printer implements ng.ExpressionVisitor, ng.StatementVisitor {
     return (
       ast.lhs.visitExpression(this, context) +
       BINARY_OPERATORS.get(ast.operator)! +
-      ast.rhs.visitExpression(this, context)
+      '(' +
+      ast.rhs.visitExpression(this, context) +
+      ')'
     );
   }
 

src/app/templates/banana.ts

@@ -0,0 +1 @@
+export const bananaBoxTemplate = `<app [(myVar)]="myProp"/>`

src/app/templates/index.ts

@@ -1,4 +1,5 @@
 import { asyncPipeTemplate } from "./async-pipe";
+import { bananaBoxTemplate } from "./banana";
 import { childComponentTemplate } from "./child-component";
 import { defaultTemplate } from "./default";
 import { eventBindingsTemplate } from "./event-bindings";
@@ -18,8 +19,9 @@ export const templates: Template[] = [
   { label: '@for vs ngFor', content: forLoopsTemplate },
   { label: 'ngIf/else w/ template reference', content: ifElseReferenceTemplate },
   { label: 'event bindings', content: eventBindingsTemplate },
-  // { label: 'ng-model', content: NgModelTemplate }, // @see: https://github.com/JeanMeche/angular-compiler-output/issues/2
+  { label: 'ng-model', content: NgModelTemplate },
   { label: 'async pipe', content: asyncPipeTemplate },
   { label: 'child component', content: childComponentTemplate },
-  { label: 'simple @let', content: simpleAtLet}
+  { label: 'simple @let', content: simpleAtLet},
+  { label: 'double binding (banna in a box)', content: bananaBoxTemplate },
 ];