fix: detect ionic components within *ngIf expressions

Author: sean-perkins

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 =