How to bind a dynamic value to index.html file content in Angular?

I have a simple web application which is developed by Angular 18. I am going to bind a dynamic attribute to the <html> tag in the index.html file as follows:

<!doctype html>
<html lang="en" class="h-100" [data-bs-theme]="theme">
<head>
<meta charset="utf-8">
<title>My app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="h-100">
<app-root></app-root>
</body>
</html>


I tried to define the theme property in the main.ts and app.component.ts files but it does not work!

Is it possible to do that? Where can I define and programmatically change the theme property? What is the best practice to meet this requirement?

Continue reading...