1

I wonder if there is any way to achieve the event and the property binding without using parenthesis or brackets?
Reference : https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding 

<input [value]="currentHero.firstName"
       (input)="currentHero.firstName=$event.target.value" >
  • In Angular2 for event-binding we need '(event-type)', looking for some way to perform the same
  • In Angular2 for property-binding we need '[property-value]', looking for some way to perform the same functionality.
    Can this be done the way normal DomElements, because '[]' & '()' is not a valid Html attributes..!

Edit:
function: 

getDomElement(model:Object){
//...some logic to control the elemet generation
return {text-type-InputElement};// ..only returns elemnts(eg: <input type="text"/>)
}
var type = getDomElement(elem).type; // .. will give us TEXT
var tagName = getDomElement(elem).tagName;//.. will give us INPUT

Using the above returned DomElement, I am trying to perform element.setAttribute("[(ngModel)]","model.firstName"). Which is not possible, any alternatives to achieve this.

peaceUser
  • 457
  • 5
  • 19
  • What do you need this for? These parens and brackets never reach the DOM. – Günter Zöchbauer Oct 27 '16 at 06:51
  • 3
    Your premise is wrong. `[]()` are valid characters in HTML5 attribute names https://www.w3.org/TR/html5/syntax.html#attributes-0 – Harry Ninh Oct 27 '16 at 06:54
  • @GünterZöchbauer I am looking to use the setAttribute() for the existing domElement, to extend for custom events, is there any alternative to do it. The source I have is only elementRef.nativeElement(~which is a domElement). – peaceUser Oct 27 '16 at 07:19
  • @Harry Ninh , I was not aware of that, in my case, an object of type [Object HtmlElement] will be a source, from your advice the object couldn't be an HTML5, can we convert it dynamically to HTML5.. ? – peaceUser Oct 27 '16 at 07:22
  • I'm confused. How is your last comment related to your question? What do you mean with "to extend for custom events" - what does need to be extended for custom events? Why would you use `setAttribute()` for inputs and registering event listeners? – Günter Zöchbauer Oct 27 '16 at 07:22
  • @GünterZöchbauer, I tried to split the dom elements from the A2 bindings. Only in certain case, if the condition satisfies I need to bind the model. else just an empty HtmlElement has to be shown on screen. – peaceUser Oct 27 '16 at 07:24

1 Answers1

3
<input bind-value="currentHero.firstName"
       on-input="currentHero.firstName=$event.target.value" >

See https://angular.io/docs/ts/latest/guide/template-syntax.html (search for "canonical")

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    Your `setAttribute` comment confuses me. This won't work if you add it dynamically. Angular2 doesn't process anything that's added dynamically to the DOM. Only when you add this statically to a components template will it be processed. – Günter Zöchbauer Oct 27 '16 at 07:27
  • it appears like, , on the screen an input textbox and when inspecting the textBox. – peaceUser Oct 27 '16 at 07:44
  • but no value, on screen, just an empty text box...! – peaceUser Oct 27 '16 at 07:47
  • You need to provide more information. I can't make any sense of your comments. I have no way of knowing what you're actually doing. Please edit your question and add your code there and explain the actual and expected behavior. Otherwise I don't know how to provide support. – Günter Zöchbauer Oct 27 '16 at 07:49
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/126798/discussion-between-peaceuser-and-gunter-zochbauer). – peaceUser Oct 27 '16 at 07:59
  • Adding `[]`, `()`, `[()]`, `{{}}`, `on-xxx`, or `bind-xxx` dynamically to the DOM doesn't buy you anything. As mentioned above Angular doesn't process this if it is added dynamically to the DOM. You need to literally write it to the template of a component otherwise Angular2 won't even notice it was added. Angular also doesn't create components or directives for HTML added dynamically later. – Günter Zöchbauer Oct 27 '16 at 08:04
  • You can build components dynamically if you need to accomplish something like that http://stackoverflow.com/questions/34784778/equivalent-of-compile-in-angular-2/37044960#37044960 or you can use imperative code to register event listeners `element.addEventListener()` or write to components properties. – Günter Zöchbauer Oct 27 '16 at 08:04
  • when there is no binding happens at all, addEventListner() purpose something?, lemme say for ng-change? – peaceUser Oct 31 '16 at 10:55
  • Not sure what you mean by `ng-change`. `ng-change` looks like Angular1 (I haven't used Angular1 myself). If the HTML is added dynamically (`[innerHTML]="..."` or similar), then there won't be an `ng-change` event, but `addEventlistener()` would work for DOM events like `click`, `change`, ... – Günter Zöchbauer Oct 31 '16 at 11:00