DEV Community

Cover image for Angular is getting New Template Syntax

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...
Collapse
 
nicholaseden profile image
nicholas-eden

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.

Collapse
 
oz profile image
Evgeniy OZ

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.

Collapse
 
nicholaseden profile image
nicholas-eden

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.

Thread Thread
 
oz profile image
Evgeniy OZ

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

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

Thread Thread
 
nicholaseden profile image
nicholas-eden

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.

Thread Thread
 
oxharris profile image
Oxford Harrison

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.)

Thread Thread
 
oz profile image
Evgeniy OZ

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

Collapse
 
nermin_karapandzic profile image
Nermin Karapandzic

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.

Collapse
 
nicholaseden profile image
nicholas-eden

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.

Thread Thread
 
danielglejzner profile image
Daniel Glejzner

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

Collapse
 
florianrappl profile image
Florian Rappl

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).

Collapse
 
spock123 profile image
Lars Rye Jeppesen

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.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Back again - now we're running everything zoneless and it's a bliss. so nice

Collapse
 
rd88a5d657 profile image
rd • 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>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
nicholaseden profile image
nicholas-eden

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.

Thread Thread
 
spock123 profile image
Lars Rye Jeppesen

Svelte uses it and it rocks

Collapse
 
ant_f_dev profile image
Anthony Fung

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.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

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.

Thread Thread
 
ant_f_dev profile image
Anthony Fung

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.

Collapse
 
adrian333dev profile image
Adrian333Dev

Bro started doing frontend work before Angular was even a thing, we better shut up 🤣

Collapse
 
stephenwhitmore profile image
Stephen Whitmore

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

Collapse
 
dreitzner profile image
Domenik Reitzner

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.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Yep, love this

Collapse
 
specialdoom profile image
specialdoom

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

Collapse
 
yousufamre profile image
YousufAmre

This seems much similar to templating using handlebars.js

Collapse
 
ignace profile image
Ignace Maes

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.

Collapse
 
cropwatchdevelopment profile image
CropWatch

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

Collapse
 
spock123 profile image
Lars Rye Jeppesen

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

Collapse
 
philipjohnbasile profile image
Philip John Basile

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

Collapse
 
spock123 profile image
Lars Rye Jeppesen

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

Collapse
 
krivanek06 profile image
Eduard Krivanek

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.

Collapse
 
bretbernhoft profile image
Bret Bernhoft

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.

Collapse
 
ant_f_dev profile image
Anthony Fung

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.

Collapse
 
draylegend profile image
Vladimir Drayling • Edited

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

@Directive(...)
export class TrackByDirective {
  ...
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

The directive is responsible to track by id.

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

Collapse
 
tecknock profile image
marcoalesan

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>
Enter fullscreen mode Exit fullscreen mode

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>
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rytis profile image
Rytis

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

Collapse
 
spock123 profile image
Lars Rye Jeppesen

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

Collapse
 
pterpmnta profile image
Pedro Pimienta M.

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

Collapse
 
snackcode profile image
snackboy

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.

Collapse
 
mikec711g profile image
Michael Casile

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

Collapse
 
___bn___ profile image
bN

This seems similar to ASP.Net Razor syntax where you can mix HTML and C#. There you can mix HTML and pseudo-TS.

Collapse
 
spock123 profile image
Lars Rye Jeppesen

Love love love this

Collapse
 
maearon profile image
mark

I tried the new syntax, which looks more like the same response but really isn't pretty github.com/maearon/skinet/blob/mai...

Collapse
 
heyrudy profile image
kokou koumagna-gottoh