How to load darkmode.js file dynamically?

I have a toggle button inside src/app/user-list/user-list.html, namely:

<div class="btn-group">
<button class="btn btn-secondary btn-sm"
type="button"
data-bs-theme-value="dark"
aria-pressed="false">
Dark
</button>
<button class="btn btn-light btn-sm"
type="button"
data-bs-theme-value="light"
aria-pressed="false">
Light
</button>
</div>


Loading it like this in src/index.html works:

<!doctype html>
<html lang="en">
<head>...</head>
<body>
<app-root></app-root>
<script src="assets/js/darkmodetoggle.js"></script>
</body>
</html>


However, I would like to load it like this in src/app/user-list/user-list.html:

export class UserList implements OnInit {
constructor(private renderer: Renderer2) {
}

ngOnInit(): void {
this.loadScript();
}

loadScript() {
if (document.getElementById('darkmode-toggle-script')) {
console.log('Script already loaded');
return;
}

const script = this.renderer.createElement('script');
script.id = 'darkmode-toggle-script';
script.src = 'assets/js/darkmodetoggle.js';
script.type = 'text/javascript';
script.onload = () => console.log('Dark Mode Script loaded dynamically');
script.onerror = () => console.error('Error loading Dark Mode Script');

this.renderer.appendChild(document.body, script);
}
}


It appears inside the html in the form:

<script _ngcontent-ng-c1923262244="" id="darkmode-toggle-script" src="assets/js/darkmodetoggle.js" type="text/javascript"></script>


But the button doesn't toggle anymore. Any idea why?

Continue reading...