Button not appearing in Angular app unless code is run in console after full render

I'm trying to dynamically add a "Help" button to an element in an Angular-based application that I don’t have direct control over. The button should appear within a container with the class .submitanduserinfo, once it’s rendered on the page. Here’s the code I’m using:

<!DOCTYPE html>
<html lang="ja-EN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Community</title>
<style>
.help-button {
margin: 10px 0;
padding: 8px 16px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
font-size: 16px;
}
.help-button:hover {
background-color: #0056b3;
}
</style>
</head>

<body>
<header>
<h1>Welcome to Community</h1>
</header>

<main>
<p>This is a community</p>
</main>

<script>
function addHelpButton() {
console.log('addHelpButton function is called');

function insertHelpButton(submitContainer) {
if (submitContainer.querySelector('.help-button')) return;

const helpButton = document.createElement('button');
helpButton.innerText = 'Help';
helpButton.className = 'help-button';
helpButton.addEventListener('click', () => alert("Help button clicked!"));

const submitButton = submitContainer.querySelector('.btn-primary');
if (submitButton) {
submitContainer.insertBefore(helpButton, submitButton);
} else {
console.error('Submit button (.btn-primary) not found in submitContainer');
}
}

setTimeout(() => {
const observer = new MutationObserver((mutationsList, observer) => {
const submitContainer = document.querySelector('.submitanduserinfo');
if (submitContainer) {
insertHelpButton(submitContainer);
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
}, 5000);
}

window.addEventListener('DOMContentLoaded', addHelpButton);
</script>
</body>
</html>


Issue: The code only works when I run it in the browser console after the page fully renders. When included in the HTML, the MutationObserver doesn’t seem to detect .submitanduserinfo, and the button doesn’t appear.

Attempts So Far:

1. 
   Timeout Delays: I tried adding a delay (currently 5 seconds), but the timing is not working since Angular’s rendering can vary.
   
   
2. 
   MutationObserver: Even with subtree: true, the observer sometimes doesn’t detect the .submitanduserinfo element when it finally loads.
   
   
3. 
   Polling with setInterval: Polling not worked felt inefficient and occasionally caused duplicate buttons.
   

Question: What’s the best way to add this button reliably when I`your text` can’t modify the Angular code? Is there a more efficient or reliable method that works with dynamically loaded elements in Angular apps?

Continue reading...