DEV Community

Angular is getting New Template Syntax

Daniel Glejzner on July 01, 2023

Update 2023–10–07: I have updated this to the final syntax form with @ New Template Syntax, Built-In Control Flow, a farewell to structural dire...

Read full post

nicholas-eden • Jul 3 '23

Am I the only one that is disgusted by this change? I liked Angular because you write html. It's easy to learn and is visually appealing. This is an ugly mess.

I'm sick of the Angular team trying to reinvent the entire framework every two years. It makes maintenance incredibly difficult and pushes people towards lighter and more stable frameworks. If people like this syntax then let them switch to a tool that uses it.

I don't mean to sound like the grumpy old guy, but the rapid changes in frontend tools makes my just want to use underscore and plain JS/TS.

Evgeniy OZ • Jul 6 '23

makes my just want to use underscore and plain JS/TS

You really should try it. Every web developer should, I'm not joking. After that, you will understand much better how frameworks work and what value they bring.

nicholas-eden • Jul 6 '23

I started doing frontend work before Angular was even a thing, you don't gotta tell me that. But modern frameworks have gone off the deep end and frequently end up being more of a burden than a help: Constant breaking changes and changes in convention, bloated dependencies, neglect for debugability, etc. At my last company every time we upgraded Angular it was a full month endeavor to coordinate updates across 5+ teams, and for what? Slightly smaller builds and some features we didn't use? I deal with React currently, which has its own issues.

I'm not saying don't use them, I just want a bit more stability in the framework space. I'd love to get to pick the framework and choose one that promises to stay out of the way. The big names have so many engineers who want to make things "better" and end up causing more problems.

Evgeniy OZ • Jul 6 '23

Try Lit - as far as I know, it's the most stable web framework.

The change, discussed in this article, is not breaking, though.

nicholas-eden • Jul 6 '23

Yeah, its more of the style change that bugs me. I like the style of html tags and templates, it looks cleaner imo because it fits the style of the rest of the template. This brings back mustache style brackets where Angular helped us reduce, its ugly imo.

This proposal would be a great optional plugin, it doesn't need to be the default. It seems like leadership changed and so did the vision.

I'll look at Lit though.

Oxford Harrison • Jul 8 '23

Talking about stability:

Syntax is a moving target on the frontend and interestingly there is a destination (which I talked about in my article), and until we get there, syntax can't be stable!

You'd realise how much we can skip if we could just use plain JS for rendering logic instead of re-inventing a new language (every new turn) that maps to the same JS constructs! (See also Eckehard's comment.)

Evgeniy OZ • Jul 8 '23

You can do this - stop using Angular and start using vanilla JS.

Nermin Karapandzic • Jul 6 '23

I haven't read the full story, but this doesn't seem like it's going to force you use the new syntax, the old syntax is still just directives, so unless they're removing directives completely then you should have backwards compatibility.

nicholas-eden • Jul 7 '23

I read the post and its not entirely clear. In the title its called an alternative syntax, but in the body they describe building migration tooling. That implies they wouldn't support both in perpetuity.

Daniel Glejzner • Jul 8 '23

Both are going to be supported for a period of time :)

Florian Rappl • Jul 4 '23

This is unfortunately not correct. The original syntax also does not parse as HTML (well anything parses as HTML, however, it will not come out as you've entered).

I also was under the wrong assumption that angular calling the template files .html and essentially using attributes is for that reason - but the parser and it's logic is still custom (and needs to be).

Lars Rye Jeppesen • Aug 7 '23

I love these changes.
I just did a new standalone app, using only Signals. That, and the new inject() functional stuff is so so so awesome to work with.

I cannot wait to be able to ditch ZoneJS.
This new syntax is basically a copy of the Svelte-syntax, which makes it easier for some new developers to onboard, I guess.

rd • Jul 4 '23 • Edited

there is "Alternatives Considered". please check source link. i would like to see this syntax instead

<ng:if cond="expr">
  <ng:then>
    True case
  </ng:then>
  <ng:else>
    False case
  </ng:else>
</ng:if>

nicholas-eden • Jul 5 '23

Yeah, I read over the entire post. That syntax looks fine imo. I don't mind things taking a few more lines if it is consistent and easy to read. This is **much **easier to read than than trying to parse over Mustache style syntax they are trying to push. We moved away from that for a good reason, this is regression imo.

Lars Rye Jeppesen • Aug 7 '23

Svelte uses it and it rocks

Anthony Fung • Jul 3 '23

I'm not repulsed by it, but I'm not particularly fond of it either. I'm just dreading the inevitable syntax migration when the current version becomes deprecated.

Lars Rye Jeppesen • Aug 7 '23

I love it, to be honest it's amazing with all the new changes. I didn't think much of them until I made a new app, standalone, only using signals, and inject() to make functional ngrx effects etc. Such an amazing experience that I cannot go back now.

Anthony Fung • Aug 7 '23

That's fair enough - new projects are one thing, but having to maintain an existing project with 1,000s of files is another. I'm guessing it'll be easier than AngularJS -> Angular 2, but I suspect it won't be as simple as running a migration script either.

Thanks for sharing that the overall development experience is smoother.

Stephen Whitmore • Jul 1 '23

I personally really like this. Anything to make code easier to read is always a win

Domenik Reitzner • Jul 2 '23

As a Svelte dev, it is nice to see the influence here ☺️
The readability argument is a strong one, especially for those among us who are more senior who tend to read a lot of code.

Lars Rye Jeppesen • Aug 7 '23

Yep, love this

specialdoom • Jul 2 '23

Feels like Svelte it's becoming influential. But that's a good thing right?

YousufAmre • Jul 2 '23

This seems much similar to templating using handlebars.js

Ignace Maes • Jul 2 '23

It's great to see frameworks take over the good parts from each other. Ember.js has been using this type of control flow too for years and I personally much prefer it over inline attributes.

CropWatch • Jul 2 '23

Its a nice start! But before moving back to Angular i want to see svelte like 3rd party js library level compatability

Lars Rye Jeppesen • Aug 7 '23

You really should check it out, Signals and inject() makes it sooooooo nice

Philip John Basile • Jul 2 '23

Really cool post. Makes me want to check bleeding edge Angular.

Lars Rye Jeppesen • Aug 7 '23

It's awesome. Standalone-app with no modules, inject() function makes you able to easy inject Services into functions, etc etc. Wondeful

Eduard Krivanek • Jul 2 '23

The angular plugin for VScode will need some additional schematics, such that when I start typing "if", it will generate the code block for me, nonetheless I like the new syntax. Seems like current FE starts to become more and more similar to each other.

Vladimir Drayling • Jul 3 '23 • Edited

I prefer to use a global directive to track ids in *ngFor:

@Directive(...)
export class TrackByDirective {
  ...
}

now I don't need to use trackBy for every *ngFor

<app-user-list>
  <app-user-item *ngFor="let u of users()" />
</app-user-list>

The directive is responsible to track by id.

How can I track ids globylly with the new syntax without providing it for every loop?

marcoalesan • Dec 17 '23

I think @if is a good tool but it does not replace *ngIf

I hope they don't remove *ngIf and let us use them both as needed

*ngIf is good for simple use

<button *ngIf="!isProtected" (click)='remove(element)'>delete</button>

while @if is better with complex use

@if (isProtected) {
  <span class='text-red'>
    you don't have permission to remove {{element.name}}
  </span>
  <button class='btn-blue' (click)='reqPerm(element)'>request permission</button>
} @else {
  <button (click)='remove(element)'>delete</button>
}

Rytis • Aug 7 '23

I haven't worked with Angular since v4, but I'm excited to see this change. I've always liked Angular, because it had the most similarities with backend code - dependency injections, etc. I hate XML though, and I think that tag attributes are not easily readable, so any move away from that is welcome. For me Twig was the perfect templating language

Lars Rye Jeppesen • Aug 7 '23

Dependency inject in Angular is now a breeze, with the inject() function you can inject services into your own functions, not needed to make classes or anything. Awesome

Bret Bernhoft • Jul 8 '23

This is interesting. I've been using Angular for a while now, and have become rather acquainted with how it currently works. With that said, I'm curious to see how these changes are adopted by the global Angular community.

Anthony Fung • Jul 3 '23

Thanks for the summary!

Personally, I don't find the new syntax significantly easier to read, but maybe it's because I got used to the current syntax.

I wonder what's driving the change. Maybe it wants to be like other frameworks for more popularity; or maybe it's because Google just likes changing its tech often.

Pedro Pimienta M. • Jul 4 '23

Angular features are getting really cool. thanks for the post.

Michael Casile • Jul 5 '23

I like the new options. Glad I have a preview at this point in my dev.

snackboy • Jul 7 '23

It appears to me that the Angular crew is attempting to move the framework to something such that code can be autogenerated. Kind of thought Google had Flutter for that.

I think the proposed syntax is going to be a hot unreadable mess when templates get complicated over time.