Custom buttons in dialog header

Question

Hi,Facing issue where i wanna set my buttons in dialog header. The problem is that if i enter elements through header attribute it doesn't react to click events. I even tried append it with renderer and  js to DOM but it still doesn't want to be clicked. The only way i get this working is to write button in HTML, but then my buttons will appear in the content section and i don't want that.Query: How to have own buttons in dialog header that reacts to click events.This is how i do it now and get it working, but in the wrong spot. I need those buttons to be in dialog header and be clickable.

Narayanasamy Panneer Selvam · Answer

Hi Domantas , 
 
Thanks for using Syncfusion products. 
 
We have validated your query with shared code snippet. You can integrate buttons in header using “header” property along with binding click event. It accepts both HTML Element and string. We have achieved specified requirement, and updated the sample below. We have covered the below things in the sample: 

Added buttons in Dialog’s header
Bind click event to all buttons
 
Demo Link: https://angular-wxpqk1.stackblitz.io  
Api Reference:  https://ej2.syncfusion.com/documentation/dialog/api-dialog.html?lang=typescript#header  
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Narayanasamy P.

Domantas · Answer

Hello again,The way you did it the click event works, cause alert is a native function and it has nothing to do with angular. What i need is to call angular function on click event as it would go in HTML file. There shouldn't be any ID properties for dynamic reasons (in worse case scenario it could be, could work that around).The event listener also gets called on click, but i can't access angular function from there anyway cause (this) gets another scope

Karthik Ravichandran · Answer

Hi Domantas, 

Thanks for your update. 

We have validated your issue based on your shared code block. You have used ECMA 5 syntax to bind the click event to button. To access the current component in angular, could you please replace it with the arrow function?  

Please refer the below code block. 





ngAfterViewInit():void{ 
      setTimeout(() => { 
        document.getElementById('custombtn1').addEventListener('click', () => { 
            this.myfun(); 
      }) 
    }) 
  } 
 
Based on your requirement we have modified the previously shared sample and refreshed in the below link.  
https://angular-vykaao.stackblitz.io/ 

Please let us know if you need further assistance on this. 

Regards, 
Karthik R