Setting (click) Attribute on Anchor Element

Question

As I understand it it is not possible to dynamically add a '(click)' attribute to an element of the DOM using Renderer2 in Angular 2+.

If this is true how do you lovely people add a '(click)' attribute when they are dynamically creating HTML in the component or what workaround do you use?

 const element = this.renderer.createElement('a');

 element.setAttribute('href', 'foobar');     // This works
 element.setAttribute('(click)', 'foobar');  // This does not work

Why don't you use this.renderer.setAttribute? You can use this.renderer.listen for this. — Ivan
– Ivan, Commented Feb 19, 2019 at 16:03
If you use element.setAttribute then it should be onclick, not (click). And the proper way is using renderer.setAttribute as mentioned by @Lends — amedina
– amedina, Commented Feb 19, 2019 at 16:04

Yahya Essam · Accepted Answer · 2019-02-19 16:20:43Z

2

(click) is not an attribute and you can't use it like this.
you may use .addEventListener
for example
element.addEventListener('click', function(){ do something} );

if you want full angular example :
HTML

<button #mybtn>my Button</button>

TS

 @ViewChild('mybtn') myBtn:ElementRef;
    ngOnInit() {
      this.myBtn.nativeElement.addEventListener('click', function() {
       console.log('from there');
      })
    }

edited Feb 19, 2019 at 16:20

answered Feb 19, 2019 at 16:15

Yahya Essam

1,9122 gold badges26 silver badges44 bronze badges

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

1 Comment

Mike Poole Over a year ago

Many thanks for that @Yahya Essam, it got me on the right track.

John · Accepted Answer · 2019-06-26 12:07:39Z

2

You can use the Renderer2 to add attributes and event listeners. I think it is better to use the Renderer2 since it acts like a wrapper and abstracts how the DOM manipulation works under the hood.

 const element = this.renderer.createElement('a');
 this.renderer.setAttribute(element, 'href', 'foobar');
 this.renderer.listen(element, 'click', this.myMethod);

Here is a working example

answered Jun 26, 2019 at 12:07

John

11.6k5 gold badges60 silver badges75 bronze badges

Collectives™ on Stack Overflow

Setting (click) Attribute on Anchor Element

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related