How to trigger a modal element defined in angularjs when I click button in reactjs

0
votes

I have a problem: My project is build on angular.js which also as mix of react components.what I want to achieve is when I performance a click event in react component I want to open the chatbot modal which is defined in angular.

here is a snippet of angular code.

<div id="bc-minimized-indicator" ng-show="showIcon()" ng-click="chatIconClicked()" class="">
<div id="bc-layered-chat" ng-class="[chatConfig.global.overlay.position, bcFontSize, {&quot;bc-minimized&quot;: minimized}]" ftr-draggable="{ handle: &quot;#bc-title&quot; }" ng-show="showPanel()" class="ng-scope bc-pc ng-hide bc-font-13 bc-right">

What I am trying to do in reactjs

import React from 'react';

const Alert = (props) => {
    if (!props.showAlert) return null
    let alertClass = ['alert'];
    if(props.alertClass){
        alertClass.push(props.alertClass);
    }
    var element = document.getElementById("elem");
    element.onclick = function(event) {
      console.log("fire",event);
      document.getElementById("bc-minimized-indicator").className = "ng-hide";
        document.getElementById("bc-layered-chat").className = "ng-scope bc-pc bc-font-13 bc-right";
    }
    return (
        <div className={alertClass.join(' ')} role="alert">
            <span dangerouslySetInnerHTML={{ __html: props.alertMsg }} />
            <button type="button" className="close" onClick={props.onClose}>&times;</button>
        </div>
    )
}

export default Alert;

In props.alertMsg I am passing a message along with button to performance click event in react.

alertMsg: "We can't find an account associated with that email address. Please try your billing telephone number or account number. Or <u id=`elem`>chat with an agent.</u>
javascriptreactjsangular