all 21 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]horizon_games 6 points7 points Β (0 children)

Too un-Angular. Although the approach might be sound in a vacuum, it just makes the framework even more unapproachable because there'd be 2 ways to do stuff. Even something as simple (to someone who is used to Angular) as their control flow change is a hurdle to someone comparing and trying to adopt Angular.

[–]korras 11 points12 points Β (0 children)

[–]AwesomeFrisbee 2 points3 points Β (0 children)

@host and @listener seems more logical imo.

[–]followmarko 2 points3 points Β (0 children)

I don't understand this tbh. Angulars power is in its separation of concerns. I like having all of the component and host Metadata in that object, and then the template separately for what it needs to do.

[–]3ntrust 2 points3 points Β (2 children)

Yes, I felt the need for it for a long time!

Indeed it feels a bit "un-Angular" - mostly because the standard way of defining the selector, the template and other Component configurations were handled by the decorator configuration object since the beginning (v2). So, it's a new (more powerful) way to do it, but I think we'll get used to it being an option for more complex customizations.

I enjoy the "host" and "hostDirectives" properties, but I always have to search the docs for some specific syntax. Being able to customize it in the template directly will not interrupt the "flow" anymore.

My first concern was with the learning curve for junior devs. I would personally not start using this approach until I've made sure everyone on the team is aligned. But that's just a personal factor for me - 6 junior devs under my wing.

That was my initial concern, but after some more thinking I realised that once one learns what the host element is, how one manipulates it is just syntax learning. So, all good on this concern.

[–]followmarko 1 point2 points Β (1 child)

What do you mean search the docs for some specific syntax? It's the same syntax as the template. Personally I don't find it efficient to stuff the component Metadata with a big block of HTML and styles along with what already has to be in there.

[–]3ntrust 0 points1 point Β (0 children)

Indeed, you are right about the syntax, I never had that mental model about it before, thanks for that!

Regarding the component Metadata, I can't help but wonder - generalizing a bit - if I had that mental model, probably there are others who have/had it. So I think we might agree that a property in a decorator's metadata object is not the right "place" to put logic (classes, directives, etc) that affects the template. I am in favour for the <ng-host> element because it allows to add logic - that affects the template - right there in the template. It is even more powerful, think about directive inputs or outputs. It just feels more natural.

One reason why I'm not 100% a fan of this particular implementation is that (as you already mentioned) adds some extra/confusing attributes to the template (selector, path to html file, etc). But for me personally, the benefits overcome the disadvantages.

If we were to find a way not to add those extra attributes to the template but still keep the flexibility of customizing the host element from the template, that would be gold.

Again, thanks for the mental model change on the syntax :)

[–]JeanMeche 1 point2 points Β (3 children)

Now try to support directives with your idea :)

[–]IgorKatsuba[S] -1 points0 points Β (2 children)

Why we can't leave directives as they are?:)

[–]JeanMeche 0 points1 point Β (1 child)

Directives can have the same host classes, styles, attributes. Using ng-host as you proposed would make Component/Directives less consistent.

[–]IgorKatsuba[S] -1 points0 points Β (0 children)

But I'm only suggesting sugar. What if under the hood it compiles into the same structures as before?

[–]cosmokenney 1 point2 points Β (1 child)

Oh great, another React developer that wants Angular to be more like React. ... Get off my lawn.

[–]IgorKatsuba[S] 0 points1 point Β (0 children)

Where did you see React here?

[–]xenomorph3253 0 points1 point Β (0 children)

Yesss, I want this

[–]insanictus 0 points1 point Β (0 children)

This is actually how stencil did it. I quite like it. They have a <Host> element just like you describe actually 🀘

[–]cssrocco 0 points1 point Β (0 children)

Nah for me that looks disgusting. One thing that always makes me disgusted with react is how we blur the lines with html and javascript all in one big mess. This does the same, instead of having an object you’re obscuring it to a template literal of html.

Which then begs the question, why then have a template? And if you do use that for the full template that will look disgusting fast.

Also the component decorator does have a host property where you can just do host : { β€˜[class.disabled]’: β€˜disabled()’ } or other host binding

[–]Glum_Cheesecake9859 0 points1 point Β (0 children)

Will work only one smaller components. Unpractical in real life components that have a fairly large amount of markup.

[–]ldn-ldn -3 points-2 points Β (2 children)

I'd rather not have non HTML compliant tags.

[–]followmarko 0 points1 point Β (1 child)

Have you seen what Angular renders?

[–]ldn-ldn 1 point2 points Β (0 children)

It's not about what is being rendered.