Automatically Migrate to Angular's New Control Flow Template Syntax

With Angular's new control flow syntax, we can simplify our templates, improve performance, and reduce bundle sizes. But do we really have time to manually change each of our templates?
Lucky for us, Angular provides an Angular CLI schematic to automatically migrate all of the templates in a project to the new control flow syntax!
In this video, we migrate an Angular project to the new control flow syntax using the Angular CLI schematic.
*Links*
Code: github.com/DeborahK/Angular-Control-Flow
*Content*
00:00 Angular's new control flow
00:37 What is a schematic?
01:15 Sample application in action
02:52 Migrating Angular templates using the schematic
04:08 Reviewing the result of the migration
05:36 Wrap up
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and KZbin content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 7,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
Contact me on Twitter: DeborahKurata
Find my Pluralsight courses: www.pluralsight.com/profile/author/deborah-kurata
Access my freeCodeCamp articles: www.freecodecamp.org/news/author/deborah-kurata/
View my KZbin content: www.youtube.com/@deborah_kurata
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #angularcontrolflow #angular17controlflow #controlflowsyntax #newsyntaxforcontrolflowintemplates #controlflowangular #controlflow #angular17controlflows #angularschematics #migratetocontrolflow

[@landonrivers]

This looks cool. Thanks!

[@deborah_kurata]

Yep! And it works well.

[@marcwinner567]

Thanks for a great video Deborah! I checked out the code in this example and I am kind of confused about why the Angular core team (normally very opionated) is not proposing an official stance on how to structure code regarding async calls together with Signals for the best performance and maintainability? Do you have any thoughts about that? I see u convert a signal to an observable for fetching async films for the vehicles and that works but somehow that doesnt look like an official enterprise solution from Angular? Can you please point me to any resources covering this issue between using Signals as state but also interoping with RxJS. It looks quite verbose whenever async stuff needs to happen in conjuncture with a Signal.

[@ebichu8126]

Hi! Thanks for the clip. In version 17, there are several new features related to Signals like signals output. could you cover those concepts in the future? Thanks :)

[@deborah_kurata]

Yep! They are definitely on the list of upcoming topics. Thanks!

[@anutaNYC]

My vs code doesn’t want to indent the new syntax is there a plug-in for the indentation or fix in prettier?

[@deborah_kurata]

Version 3.1 of Prettier says it handles Angular's control flow: prettier.io/blog/2023/11/13/3.1.0

[@anutaNYC]

@@deborah_kurata thank you it does but it leaves html tags on a new line and there is nothing I can do with that, I added the settings and all but still it doesn't

[@deborah_kurata]

@@anutaNYC Consider filing a bug report to Prettier?

[@dylanjhalltech8313]

Thanks for the video! I actually ran the migration script last night. Since our projects are in an nx workspace, I used their generator to produce a script, then I modified it an ran it: npx nx generate @angular/core:control-flow-migration --format=true --path=./apps/my-app --no-interactive --dry-run . It worked very well but I am going to do as you suggested and see if it actually converted everything correctly

[@deborah_kurata]

Cool! nx is a great set of tools!

[@augustincalin]

Reminds me of ASP classic (before ASP.NET) and spaghetti syntax. Me not like it.

[@deborah_kurata]

Yeah, the community vote wasn't 100% for it either. But it does provide a clear block-based syntax, similar to JavaScript/TypeScript/C#. I think it will help a bit when VSCode indents it a bit better. (I understand that the latest version of Prettier does that already.)