Repository navigation
Idea to specify bindings with annotations / decorators on methods rather than in the host configuration #3267
Description
Wouldn't it be nicer to have something like this:
@Component({
selector: 'comp'
})
@View({
template: ''
})
export default class Comp {
@Property({expression: '[attr.test]'})
set testProp(value: string) {}
@Event({name: 'click', stopPropagation: false})
onClick(event: MouseEvent) {}
}Rather than this:
@Component({
selector: 'comp',
host: {
'(click)': 'onClick($event)',
'[attr.test]': 'testProp'
}
})
@View({
template: ''
})
export default class Comp {
testProp: string;
onClick(event: MouseEvent) {}
}I know it's gonna be a bit different than working in a template but don't you think this is much more convenient?
Activity
gionkunz commentedon Jul 24, 2015
Also it allows to specify options (and not rely on hard to remember and limited symbol characters)
pkozlowski-opensource commentedon Jul 24, 2015
@gionkunz those are the exact same characters as the ones used in a template. So I don't thin we've got a problem of "limited" symbol characters - or said differently - if we've got the pb here we've got it in templates as well.
I would rather keep the syntax that is consistent with we've got in templates (after all we are manipulating a DOM element here) rather than introduce a new syntax.
gionkunz commentedon Jul 24, 2015
Yeah, but using string tokens to configure a component within JavaScript just feels wrong. The token approach is a consequence of being limited to text in HTML but in JavaScript I thinks it's wrong to keep this limitation just for the sake of consistency.
One other benefit of having annotations / decorators on accessors and methods would be that they are contextual at the right place. Even if you look at just a very simple example like the material button https://github.com/angular/angular/blob/master/modules/angular2_material/src/components/button/button.ts#L12-L37 . It's already a bit confusing to associate host bindings to functions and properties.
I can imagine tooling could also work better by using decorators to specify bindings within components.
pkozlowski-opensource commentedon Jul 24, 2015
Could you elaborate on "just feels wrong"? For me it "feels right" since we are specifying part of host element template really. There was one proposal for this syntax to look like:
host: '(click)=onClick($event) [tabIndex]=tabIndex'to be even closer to what you write in a template.Anyway, we need stronger arguments than feelings here :-)
pkozlowski-opensource commentedon Jul 24, 2015
My mental model here is this: everything on the
hostshould be part of the host element template. It is like extending host element template from a directive.gionkunz commentedon Jul 24, 2015
Is it? But the scope is different right? If I'm adding a event binding on a component element in HTML, i'll never work in the context of the component itself but in the context where I included the directive. Am I completely wrong here?
With "feels wrong" I just think that writing any kind of template fragment inside of JavaScript is wrong as if we look at the problem like this:
Then, writing some fragments back to the View would be like this:
Which could be simplified by:
I'm sorry for my invented notation but I don't have access to any drawing tools right now :)) I hope this makes at least a little bit of sense.
gionkunz commentedon Jul 24, 2015
It's the same as if someone would use a configuration file (template) or the API of the same product (Annotations)
mhevery commentedon Jul 27, 2015
Similar to: #1047
vsavkin commentedon Sep 10, 2015
Fixed 896add7
gionkunz commentedon Sep 11, 2015
Awesome work @vsavkin !
angular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.