diff --git a/apps/angular/ionic-angular-standalone/src/app/control-syntax/control-syntax.page.html b/apps/angular/ionic-angular-standalone/src/app/control-syntax/control-syntax.page.html
new file mode 100644
index 0000000..83ea55d
--- /dev/null
+++ b/apps/angular/ionic-angular-standalone/src/app/control-syntax/control-syntax.page.html
@@ -0,0 +1,16 @@
+
+
+ *ngIf Usage
+
+
+
+
+
+
+ *ngIf Usage
+
+ Toggle
+
+
+
+
diff --git a/apps/angular/ionic-angular-standalone/src/app/control-syntax/control-syntax.page.ts b/apps/angular/ionic-angular-standalone/src/app/control-syntax/control-syntax.page.ts
new file mode 100644
index 0000000..241a441
--- /dev/null
+++ b/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;
+}
diff --git a/apps/angular/ionic-angular-standalone/src/app/view-child/view-child.page.ts b/apps/angular/ionic-angular-standalone/src/app/view-child/view-child.page.ts
index a29802a..f86a005 100644
--- a/apps/angular/ionic-angular-standalone/src/app/view-child/view-child.page.ts
+++ b/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() { }
}
diff --git a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts
index 39c0cbe..e1b5ba4 100644
--- a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.test.ts
+++ b/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: \`
+
+
+ *ngIf Usage
+
+
+
+
+
+ *ngIf Usage
+
+ Toggle
+
+
+
+
+ Visible
+
+
+ \`,
+ 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: \`
+
+
+ *ngIf Usage
+
+
+
+
+
+ *ngIf Usage
+
+ Toggle
+
+
+
+
+ Visible
+
+
+ \`,
+ 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 });
diff --git a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts b/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts
index ca9ec13..6109b56 100644
--- a/packages/cli/src/angular/migrations/standalone/0002-import-standalone-component.ts
+++ b/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 =