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...
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
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.
Try Lit - as far as I know, it's the most stable web framework.
The change, discussed in this article, is not breaking, though.
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.
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.)
You can do this - stop using Angular and start using vanilla JS.
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.
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.
Both are going to be supported for a period of time :)
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).
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.
Back again - now we're running everything zoneless and it's a bliss. so nice
there is "Alternatives Considered". please check source link. i would like to see this syntax instead
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.
Svelte uses it and it rocks
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.
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.
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.
Bro started doing frontend work before Angular was even a thing, we better shut up 🤣
I personally really like this. Anything to make code easier to read is always a win
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.
Yep, love this
Feels like Svelte it's becoming influential. But that's a good thing right?
This seems much similar to templating using handlebars.js
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.
Its a nice start! But before moving back to Angular i want to see svelte like 3rd party js library level compatability
You really should check it out, Signals and inject() makes it sooooooo nice
Really cool post. Makes me want to check bleeding edge Angular.
It's awesome. Standalone-app with no modules, inject() function makes you able to easy inject Services into functions, etc etc. Wondeful
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.
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.
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.
I prefer to use a global directive to track ids in
*ngFor
:now I don't need to use
trackBy
for every*ngFor
The directive is responsible to track by id.
How can I track ids globylly with the new syntax without providing it for every loop?
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 usewhile
@if
is better with complex useI 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
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
Angular features are getting really cool. thanks for the post.
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.
I like the new options. Glad I have a preview at this point in my dev.
This seems similar to ASP.Net Razor syntax where you can mix HTML and C#. There you can mix HTML and pseudo-TS.
Love love love this
I tried the new syntax, which looks more like the same response but really isn't pretty github.com/maearon/skinet/blob/mai...
All lead to this : day8.github.io/re-frame/re-frame/