Set (click) attribute in button using renderer2 in Angular

Question

I am trying to create a chat-based application where I am creating each type of chat popup according to requirements and using Angular Renderer2. I tried to add a (click) attribute to the chat message element while rendering that in UI.

I got this error:

DOMException: Failed to execute 'setAttribute' on 'Element': '((click))' is not a valid attribute name.

chat.component.ts

const btn3: HTMLDivElement = this.renderer.createElement('button');
this.renderer.addClass(btn3, 'btn');
this.renderer.addClass(btn3, 'btn-light');
this.renderer.setAttribute(btn3, '(click)', 'sendMessage()');
btn3.innerHTML = 'Maybe later!';
this.renderer.appendChild(buttons, btn3);

Barremian · Accepted Answer · 2021-02-02 10:31:59Z

2

setAttribute function is to set the element's attributes like disabled. Instead you could use the listen() function to add an event listener.

this.renderer.listen(
  btn3, 
  'click', 
  this.sendMessage.bind(this)
);

OR

this.renderer.listen(
  btn3, 
  'click', 
  () => this.sendMessage()
);

You either need to bind or use arrow-functions to preserve the meaning of this keyword in the callback function.

answered Feb 2, 2021 at 10:31

Barremian

31.2k4 gold badges37 silver badges67 bronze badges

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

1 Comment

Bharat Dhal Over a year ago

Thanks @michael-d for helping, Regards, Bharat

Collectives™ on Stack Overflow

Set (click) attribute in button using renderer2 in Angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related