DEV Community

Cover image for Ng-News: Episode 22/49 - Versatile Angular Style, Pro Template-Driven Forms

Posted on


Ng-News: Episode 22/49 - Versatile Angular Style, Pro Template-Driven Forms

Younes Jaaidi introducing the concept of "Versatile Angular Style" that makes the integration into various external (build) tools easier. Ward Bell suggesting the use of template-driven forms over reactive.

Versatile Angular Style

Younes Jaaidi came up with an analysis why modern build tools, like Vite, are so hard to integrate into Angular. Whereas with other frameworks, like React, its almost like a walk in the park.

Younes shows that if we would use inlining templates and styles, use the inject function and of course standalone components, then Angular components don't require any special treatment anymore.

For example, look at the dependency injection via the constructor. TypeScript removes a parameter's type. So the information about the injected type is not available during the runtime.

That's why the TypeScript compiler adds specific metadata, which has to be enabled in the tsconfig.json. Now guess what? Non-Angular tools might not have that configuration enabled, so DI fails.

If, on the other side, we go with the new inject function, that's not a problem anymore. The parameter is the type/class itself. Therefore it is available in JavaScript, and no particular TypeScript configuration is necessary.

Younes calls these kinds of "stripped-down" components versatile components.

And tools like Vite, Vitest, SWC, or Playwright component testing do not have any issues with them anymore, and the integration is quite easy.

Template-Driven Forms for Everyone

At the official Angular Meetup, Ward Bell presented some good arguments for template-driven forms. Compared to reactive forms, they require less code and we can do the same things until it comes to validation.

For that part, Ward suggests not using Angular's validation feature at all but to go with a more sophisticated validation library, like vest.

To get more information about the validation part, you can watch his talk at this year's ng-conf which is available for free, when you register.

By the way: ng-conf opened their Call for Papers for the conference in 2023. You can submit your talk until the second of January.

New Releases

Nx 15.3

Last but not least, Nx 15.3 came out with support for standalone projects. You have can now have only one Angular application which is also located in standard src directory and not in the apps directory.

Cypress 12

And we have new major release for Cypress with version 12. The possibility to switch between origins within a test left the beta status and is now generally available.

Announcing Cypress 12

Hello, testing fam! Yes, we know it's only been a hot minute since Cypress 11 was released, but the team has been cranking hard and wanted to get the latest bits into your hands as soon as possible. So, without further ado, I'm happy to announce Cypress 12 is now


Top comments (0)