CODEWITHSUNDEEP
angulartypescriptpolymerweb-component
Astrowie
Astrowie

Reputation: 315

How to get hold of event binding attribute in Angular2 like (click) or (keyup) and insert them in new html element

My custom Polymer webcomponents malfunction with Angular2. I had to wrap them in custom directive (which delays the rendering of web components until the are inserted into the DOM by angular).

Wrapping works like that:

<my-custom-wrapper component="custom-fancy-element"></my-custom-wrapper>

What basically happens is that directive <my-custom-wrapper> is being hidden and I insert the <custom-fancy-element> before this hidden element. <custom-fancy-element> is correctly shown on the web page. The problem is when I want to apply event binding attribute like (click)="someFunction()".

This is what I do:

<my-custom-wrapper component="custom-fancy-element" (click)="someFunction()">
</my-custom-wrapper>

And this is what I want as a result:

<custom-fancy-element (click)="someFunction()"></custom-fancy-element>

How is it possible to fetch this event binding attribute from inside TypeScript and later on add it to the newly created html element? I tried .setAttribute("on-click", "someFunction($event)"); but angular doesn't recognize it.

Below is a code snippet of how I handle other attributes (like value="something" class="alert green-stuff" that I want to be added to the newly created HTML element.

constructor(@Attribute('component') component: string, element: ElementRef) {
  this.component = component;
  this.element = element;

  var my_new_component = document.createElement(this.component);
  if (my_new_component.constructor !== HTMLUnknownElement) {
    if (this.element.nativeElement.getAttribute("value")){
      my_new_component.setAttribute("value", this.element.nativeElement.getAttribute("value"));
    }
    if (this.element.nativeElement.getAttribute("class")) {
      var myComponentClasses = this.element.nativeElement.getAttribute("class").split(" ");
      for (var i = 0; i < myComponentClasses.length; i++) {
        my_new_component.className += " " + myComponentClasses[i];
      }
    }
    this.webcomponent = my_new_component; // Which is just:
               // <custom-fancy-element class="blue-pattern" value="some"></custom-fancy-element>
}

}

And later on I insert HTML element before my directive like that:

ngOnInit() {
  var parentNode = Polymer.dom(this.element.nativeElement).parentNode;
  if (parentNode) {
    Polymer.dom(parentNode).insertBefore(this.webcomponent, this.element.nativeElement);
  }
}

I guess, getting and setting attribute in Angular 1 would be possible with 

.directive('someDirective', function() {
   return {
     ...
     link: function (scope, element, attributes) {
       //assign attribute to web component
     }
}

but how to do it in Angular2 and TypeScript?

Upvotes: 1

Views: 2045

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

This is not supported. You can't add (click) or (keyup) dynamically to the DOM. You can get hold of an element and use addEventListener(...)

Angular2 binding syntax only works when statically added to a components template.

Upvotes: 2

Related Questions