Categories

Thursday, May 30, 2024
#919814419350 therichposts@gmail.com
AngularAngular 17

Migrate Angular templates to the new syntax introduced to Angular 17 Efficiently

Migrate Angular templates to the new syntax introduced to Angular 17 Efficiently

Hello friends, welcome back to my blog. Today in this blog post, I am going to show you, Migrate Angular templates to the new syntax introduced to Angular 17 Efficiently.

Guys as you know in Angular 17 we can have different syntax for ngIf, ngFor and so on. Am looking for an efficient way of migrating old syntax in html files to the new on presented in Angular 17:

For example I had this old html in Angular 15:

<ng-container *ngIf="!dynamicWidth; else FlexibleRef">
  <div class="c-title"></div>
  <div class="c-desc c-desc__short"></div>
  <div class="c-desc c-desc__long"></div>
</ng-container>

<ng-template #FlexibleRef>
  <div
    *ngFor="let item of count | numberRange; let i = index"
    [ngStyle]="{ width: (100 / count) * (i + 1) + '%' }"
    class="flexible-desc"></div>
</ng-template>

And need it in the new syntax like this:

@if (!dynamicWidth) {
  <div class="c-title"></div>
  <div class="c-desc c-desc__short"></div>
  <div class="c-desc c-desc__long"></div>
} @else { 
    @for (item of count | numberRange; track item; let i = $index) {
      <div [ngStyle]="{ width: (100 / count) * (i + 1) + '%' }" class="flexible-desc">. </div>
   } 
}

So guys to overcome this issue I found below trick:

  • If you’re using the Angular CLI, you can run ng g @angular/core:control-flow
  • If using Nx, you can run nx generate @angular/core:control-flow-migration

Now we are done friends and please run ng serve command and if you have any kind of query then please do comment below.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Thanks

Jassa

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.