2023 was a year of major evolution for both Ionic and Angular. Unlike specs that auto-follow when you upgrade, much of the progress ships as optional features—if you do not catch up, your product keeps the old patterns. Let's check what an Ionic Angular setup looked like in January 2024.
Ionic Angular setup as of January 2024
1. Ionic New Form Syntax
Ionic’s New Form Syntax shipped last April. Previously, form components like ion-input had to be paired with ion-label; with New Form Syntax, ion-label is unnecessary and you define labels with the label attribute.
Old syntax
<ion-item fill="outline">
<ion-label>Email:</ion-label>
<ion-input placeholder="hi@ionic.io"></ion-input>
<div slot="helper">Please enter a valid email address</div>
</ion-item>
New syntax
<ion-input
label="Email:"
placeholder="hi@ionic.io"
fill="outline"
helper-text="Please enter a valid email address"
></ion-input>
From Ionic v7 onward, the old syntax still works and only logs a console warning, but it will likely be removed around v8, so I recommend migrating to the new syntax. Read more here:
https://zenn.dev/rdlabo/articles/1eb9e13c8a5945
2. Angular standalone setup
Angular v17 made standalone the default. Many projects may already have migrated with ng generate @angular/core:standalone. You no longer need to learn NgModules, and apps become more intuitive to build. Read more here:
https://zenn.dev/lacolaco/books/angular-standalone-components/viewer/intro
3. Ionic standalone setup
@ionic/angular followed Angular with standalone support. Use npx @ionic/angular-standalone-codemods for automated migration—I recommend moving Ionic Angular to standalone. Read more here:
https://zenn.dev/rdlabo/articles/8beb8c91e7d337
4. Angular control flow
Until now, Angular control flow relied on DOM-heavy patterns like ng-container and *ngIf, which mixed awkwardly with templates. New control flow improves that developer experience.
<!-- Previous syntax -->
<app-dashboard *ngIf="user.loggedIn; else loginBlock" />
<ng-template #loginBlock><app-login /></ng-template>
<!-- Control Flow -->
@if (user.loggedIn) {
<app-dashboard />
} else {
<app-login />
}
https://zenn.dev/carimatics/articles/angular_2023_builtin_control_flow
ng generate @angular/core:control-flow automates migration. See also:
https://zenn.dev/carimatics/articles/angular_2023_builtin_control_flow
Summary
If you keep running on old patterns, a big rewrite becomes inevitable someday. Staying current avoids large jumps and keeps your product maintainable. Ionic Angular adopts Angular’s latest features aggressively, so if you use Ionic Angular, keep an eye on what is new in Angular too.