Clone/Copy a Method in Javascript?

Question

How does one clone or copy a method such that no reference to the original method is maintained?

I am trying to copy a click function on an element using the DOM and assign it to another element so I can remove the first element from the DOM without losing the function reference on the other element. I am doing this in a directive.

element.click = parent.click //need a better way to copy
element.click() //works
remove(parent)
element.click() //doesn't work

The reason why I am doing this is because I am removing the parent-wrapper tag, which has a (click) method assigned to it, so that just its inner button template remains. However, because I am removing the wrapper tag, the (click) on the parent tag is not being passed to the template button tag.

For instance, I have an app-button component with a button in its template.

Currently this is rendered:

<app-button (click) = function(1, 2)>
  <button>
  </button>
</app-button>

I want the parent tag removed, which I am doing via a DOM manipulation, but want to maintain the (click) function, like:

<button (click) = function(1, 2)>
</button>

Take a look at [this post](https://stackoverflow.com/q/1833588/1009922). [One answer](https://stackoverflow.com/a/6772648/1009922) suggests using `element.click = parent.click.bind(element)`. — ConnorsFan, Jul 18 '19 at 15:29
Unfortunately that doesn't work. I've tried some of the other methods on there with no luck -- I think b/c those posts are pretty old. — ACarr, Jul 18 '19 at 15:43
@ACarr can you show more of your code? I think you might be going about what you are trying to achieve in the wrong way. — Taurayi, Jul 18 '19 at 15:46
@ACarr "The reason why I am doing this is because I am removing the parent-wrapper tag, which has a (click) method assigned to it, so that just its inner button template remains" but why? I'm only asking because I'm wondering why you need `` in the first place when you can just do ` — Taurayi, Jul 18 '19 at 16:21
@Taurayi Because that will render ...Basically it still has that outer tag, but now its a button. There are a lot of personalized classes for my AppButtonComponent, so if I were to correct this by removing the button template from app-button, I wouldn't be able to add these button classes within the template. If there were a way to transfer the classes I have assigned to my button template within AppButton to the outer tag, then this could work. — ACarr, Jul 18 '19 at 17:37
@ACarr can you show all your code? You could use stackblitz(https://stackblitz.com/). — Taurayi, Jul 19 '19 at 09:49

score 0 · Answer 1 · answered Jul 19 '19 at 09:45

I'm not quite sure I understand why you are trying to do what you are doing(or what it is exactly), but from my understanding, you could store a reference to the host element '' in the component class, then you can assign a listener to the <button> element in your template that triggers a click event on that reference:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component, ViewChild, ElementRef, Renderer2, OnInit} from '@angular/core';


@Component({
  selector: 'app-root',
  template: `
    <app-button (click)="foo()"></app-button>
  `
})
export class AppComponent {

    foo() {

        console.log('bar');

    }// end function

}// end class


@Component({
  selector: 'app-button',
  template: `<button #button (click)="onClick()">Click me</button>`
})
export class AppButtonComponent implements OnInit {

    @ViewChild('button')
    private button:ElementRef;

    constructor(
        private element:ElementRef, 
        private renderer:Renderer2
    ) {}

    ngOnInit() {


        let parent = this.element.nativeElement.parentElement,
            element = this.element.nativeElement,
            button = this.button.nativeElement;

        this.renderer.insertBefore(parent, button, element );
        this.renderer.removeChild(parent, element);

    }// end function

    onClick() {

        let element = this.element.nativeElement;

        element.click();

    }// end function

}// end class

Clone/Copy a Method in Javascript?

1 Answers1