innerHTML issue in Angular

Question

in my angular service I have three methods like below

        public loadLiveChat() {
            let url: string;
            url = this.appConfig.config.liveAgent.liveAgentScriptUrl;
            this.dynamicallyLoadScript(url);
        }

        public dynamicallyLoadScript(url) {
            const script = document.createElement('script');
            script.src = url;
            document.head.appendChild(script);
            // const agentScriptLoadInterval = setInterval( () => {
            //     this.openLiveChat();
            //     clearInterval(agentScriptLoadInterval);
            // }, 500);
            setTimeout( () => {
                this.openLiveChat();
            }, 5000);
        }

        public openLiveChat() {
            const laq = '_laq';
            this.getLiveAgentClient().init(this.appConfig.config.liveAgent.liveAgentChatUrl,
                this.appConfig.config.liveAgent.liveAgentOrganizationalId,
                this.appConfig.config.liveAgent.liveAgentDeploymentId);

            if (!window[laq]) {
                window[laq] = [];
            }
            window[laq].push( () => {
                this.getLiveAgentClient().showWhenOnline(this.buttonId, document.getElementById('liveagent_button_online_' + this.buttonId));
                this.getLiveAgentClient().showWhenOffline(this.buttonId, document.getElementById('liveagent_button_offline_' + this.buttonId));
            });

            const forChat = document.querySelector('#uhChat');
            forChat.innerHTML = `<a><img id="liveagent_button_online_${this.buttonId}"
                style="display: none; border: 0px none; cursor: pointer; height: 16.05px;
                margin-right: 10px; margin-top: 1px;" />

                <img id="liveagent_button_offline_${this.buttonId}"
                style="display: none; border: 0px none;
                height: 16.05px; cursor: pointer; margin-right: 10px; margin-top: 1px" /> Chat</a>`;

            document.querySelector('#liveagent_button_offline_' + this.buttonId).addEventListener('click', () => {
                this.loadLivechatOfflinePage();
            });

            document.querySelector('#liveagent_button_online_' + this.buttonId).addEventListener('click', () => {
                this.initilizeLiveChat();
            });
        }

When page loads I am getting innerHTML of undefined/null error in the console. Any suggestions for rearranging this code to fix that error please?

Answer 1

You need to call your service method only after your DOM has #uhChat element to find.