Set the title of angular application from the parent tab in chrome

Question

I have an application which opens another angular application in a new tab on clicking a button. I need to override the title of the new tab from the parent tab and set a value. Some mock code below

<!DOCTYPE html>
<html>

<head>
    <title>New tab</title>
</head>

<body>
    <div>
        <input id="toolId" placeholder="ToolId" style="padding: 4px 0; width: 70px;" />

        <button id="button">Launch</button>
    </div>

    <script>
        window.onload = function () {
            document.getElementById('button').addEventListener('click', () => {

                var newWin = window.open('http://localhost:4200', "_blank");

                // add a load listener to the window so that the title gets changed on page load
                newWin.onload = function() {
                    newWin.document.title = 'New Title';
                    console.log('Loaded');
                };

                // newWin.document.title = 'New Title';
                
            })
        }
    </script>
</body>

</html>

But when i try to do this , i always see the default value set by the angular application rather than what is set by the above code. What am i missing here ? Is it blocked by chrome by chance, could not find any relavent doc if it is .

I think you need to set the title from the new app that's being opened, and not from the opener. If you are using Angular, you can always set the title using the TitleService. See this answer https://stackoverflow.com/questions/47900447/how-to-change-page-title-with-routing-in-angular-application/47900525#47900525 (Disclaimer, this is an answer from me on another question) — John, May 31 '21 at 11:45
Does this answer your question? [How to change page title with routing in Angular application?](https://stackoverflow.com/questions/47900447/how-to-change-page-title-with-routing-in-angular-application) — John, May 31 '21 at 11:49
Yes i know we can use title Service to set the title from angular app ..But my question is to set this from the opener .. is it not possible ? If so why ?any docs you can redirect me to ? — Vikhyath Maiya, May 31 '21 at 12:09
I see. I misunderstood your question. I don't think that's possible. Maybe this answer is what you are looking for https://stackoverflow.com/a/27847006/1471485 — John, May 31 '21 at 23:51

score 0 · Answer 1 · edited Oct 29 '21 at 11:03

You can find an explanation for this in the documentation:

The problem with <title>:

The obvious approach is to bind a property of the component to the HTML like this:

<title>{{This_Does_Not_Work}}</title>

Sorry but that won't work. The root component of the application is an element contained within the tag. The HTML <title> is in the document , outside the body, making it inaccessible to Angular data binding. You could grab the browser document object and set the title manually. That's dirty and undermines your chances of running the app outside of a browser someday.

Set the title of angular application from the parent tab in chrome

1 Answers1