Merge pull request #16 from ionic-team/sp/angular-control-syntax

fix: detect ionic components within *ngIf expressions

Author: sean-perkins

apps/angular/ionic-angular-standalone/src/app/control-syntax/control-syntax.page.html

@@ -0,0 +1,16 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>*ngIf Usage</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content [fullscreen]="true">
+  <ion-header collapse="condense">
+    <ion-toolbar>
+      <ion-title size="large">*ngIf Usage</ion-title>
+      <ion-buttons *ngIf="isVisible">
+        <ion-button>Toggle</ion-button>
+      </ion-buttons>
+    </ion-toolbar>
+  </ion-header>
+</ion-content>

apps/angular/ionic-angular-standalone/src/app/control-syntax/control-syntax.page.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+
+@Component({
+  selector: 'app-control-syntax',
+  templateUrl: './control-syntax.page.html',
+  standalone: true,
+  imports: [IonicModule, CommonModule, FormsModule],
+})
+export class ControlSyntaxPage {
+  isVisible = true;
+}

apps/angular/ionic-angular-standalone/src/app/view-child/view-child.page.ts

@@ -10,13 +10,10 @@ import { IonContent, IonicModule } from '@ionic/angular';
   imports: [IonicModule, CommonModule, FormsModule],
 })
 export class ViewChildPage implements OnInit {
-  /**
-   * Referencing the template's ion-content results in a double call.
-   */
   @ViewChild(IonContent)
   content!: IonContent;
 
-  constructor() {}
+  constructor() { }
 
-  ngOnInit() {}
+  ngOnInit() { }
 }

packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts

@@ -210,6 +210,85 @@ describe("migrateComponents", () => {
       );
     });
 
+    it("should detect Ionic components within *ngIf expressions", () => {
+      const project = new Project({ useInMemoryFileSystem: true });
+
+      const component = `
+        import { Component } from "@angular/core";
+
+        @Component({
+          selector: 'my-component',
+          template: \`
+            <ion-header [translucent]="true">
+              <ion-toolbar>
+                <ion-title>*ngIf Usage</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content [fullscreen]="true">
+              <ion-header collapse="condense">
+                <ion-toolbar>
+                  <ion-title size="large">*ngIf Usage</ion-title>
+                  <ion-buttons *ngIf="isVisible">
+                    <ion-button>Toggle</ion-button>
+                  </ion-buttons>
+                </ion-toolbar>
+              </ion-header>
+              <div *ngIf="isVisible">
+                <ion-label>Visible</ion-label>
+              </div>
+            </ion-content>
+          \`,
+          standalone: true
+        })
+        export class MyComponent {
+          isVisible = true;
+        }
+      `;
+
+      const componentSourceFile = project.createSourceFile(
+        "foo.component.ts",
+        dedent(component),
+      );
+
+      migrateComponents(project, { dryRun: false });
+
+      expect(dedent(componentSourceFile.getText())).toBe(
+        dedent(`
+        import { Component } from "@angular/core";
+        import { IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonButton, IonLabel } from "@ionic/angular/standalone";
+
+        @Component({
+            selector: 'my-component',
+            template: \`
+            <ion-header [translucent]="true">
+              <ion-toolbar>
+                <ion-title>*ngIf Usage</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content [fullscreen]="true">
+              <ion-header collapse="condense">
+                <ion-toolbar>
+                  <ion-title size="large">*ngIf Usage</ion-title>
+                  <ion-buttons *ngIf="isVisible">
+                    <ion-button>Toggle</ion-button>
+                  </ion-buttons>
+                </ion-toolbar>
+              </ion-header>
+              <div *ngIf="isVisible">
+                <ion-label>Visible</ion-label>
+              </div>
+            </ion-content>
+          \`,
+            standalone: true,
+            imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButtons, IonButton, IonLabel]
+        })
+        export class MyComponent {
+            isVisible = true;
+        }
+      `),
+      );
+    });
+
     describe("hyperlinks", () => {
       it("should detect and import routerLink used in the template", async () => {
         const project = new Project({ useInMemoryFileSystem: true });

packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts

@@ -245,10 +245,12 @@ function detectIonicComponentsAndIcons(htmlAsString: string, filePath: string) {
   let hasRouterLink = false;
 
   const recursivelyFindIonicComponents = (node: any) => {
-    if (node.type === "Element$1") {
-      if (IONIC_COMPONENTS.includes(node.name)) {
-        if (!ionicComponents.includes(node.name)) {
-          ionicComponents.push(node.name);
+    if (node.type === "Element$1" || node.type === "Template") {
+      const tagName = node.type === "Template" ? node.tagName : node.name;
+
+      if (IONIC_COMPONENTS.includes(tagName)) {
+        if (!ionicComponents.includes(tagName)) {
+          ionicComponents.push(tagName);
         }
 
         const routerLink =