Angular accessing function specified in renderer2 set property

Question

I have a directive that replaces a table value with an "a href" using renderer.setProperty.

Attached to the "a href" is a "click" property which im not sure how to access the function: "onClickAccountLink($event)" or add a programmatic function to it.

I've tried adding the same function name within the same directive but it does not seem to use the same function specified in the same file.

import { Directive, ElementRef, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[AccountLink]'
})
export class AccountLink implements OnInit {

  constructor(public el: ElementRef, public renderer: Renderer2) {}

  ngOnInit() {}
  ngAfterViewInit() {
    let iban = this.el.nativeElement;
    if(iban) {
      this.format(iban);
    }
  }

  format(val) {
    this.renderer.setProperty(val, 'innerHTML', `<a href="javascript: void(0)" (click)="onClickAccountLink($event)">${val.innerHTML}</a>`);
    console.log(typeof(val.innerHTML)) //string
    

  }

  onClickAccountLink(event: any) {
    console.log(event)
    event.stopPropagation();
    event.preventDefault();
    console.log("function called")
  }
}

the directive is attached to a value in a table row.

<td AccountLink>{{iban}}</td>

how do I make my onClickAccountLink function usable?

hello world · Accepted Answer · 2022-01-11 15:20:11Z

0

i read this problem and it solved my problem.

i added the "render.listen" to check for the click event

  format(ibanValue) {
    this.renderer.setProperty(ibanValue, 'innerHTML', `<a href="javascript: void(0)">${ibanValue.innerHTML}</a>`);
    this.renderer.listen(ibanValue ,'click', ()=> {
      this.onClickAccountLink(ibanValue);
    });
  }

answered Jan 11, 2022 at 15:20

hello world

3261 gold badge9 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular accessing function specified in renderer2 set property

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related