0

I need to rewrite/adapt a JS method so I can run an old JS script into a new Angular app.

  boot: function() {
    var that = this;

    that.container = document.getElementById('embedded_messenger');
    that.chatClient = document.getElementById('chat_client').contentWindow;

    window.addEventListener('message', that.receiveMessage, false);

    return this;
  }

Usually, this boot method is called just after the script has been loaded into the HTML page.

<body>
  ...
  <script src="embed.js"></script>
  <script>
      var options = {};
      Chat.boot();
  </script>
</body>

  1. In an Angular app, should I call the boot function inside ngOnInit() to get the same behaviour as previously with the HTML document ?

  2. var that = this is explained here but my question is about return this; : is that returned ? Is that a clone of (or a reference to) this ?

  3. that.container = document.getElementById('embedded_messenger'); generates an error during Angular compilation : Property 'container' does not exist

Is it a good practice to use @ViewChild('embedded_messenger') to replace getElementById('embedded_messenger') or is it better to use Angular elements ?

  1. Same question about addEventListener : should I use Angular EventManager to replace it ?

Many thanks for your advices.

Frankie
  • 181
  • 1
  • 1
  • 13
  • Just so we understand: is this old code that you don't have access to, or is this old code that you can rewrite just fine? As for (2) `that` is just a variable that has nothing to do with what's being returned, in the same way that `a` in `let a = b; ...; return b;` is irrelevant to the return. – Mike 'Pomax' Kamermans Aug 09 '20 at 16:50
  • 1
    checkout this article https://medium.com/claritydesignsystem/four-ways-of-listening-to-dom-events-in-angular-part-2-hostlistener-1b66d45b3e3d – Hadi Mir Aug 09 '20 at 16:51
  • Hi Mike, thank you for your answer. The *old code* in the embed.js script works fine when added inside a – Frankie Aug 09 '20 at 23:15
  • 1
    yes viewChild is the good practice also is similar to getElementById() in code js, you can use HostListener for DOM event listening, also you can use boot method inside ngOnInit or at any of the required moment when you want to call angular it has few more lifecycle hooks check them too. – Tarang Rathod Aug 10 '20 at 10:02
  • About (2) : `var that = this` we assign the object `this` to `that` so it is the reference to the original objet `this` that is copied. So when `that` is modified, `this` is also modified. We actually return `this` but it has been modified when `that` has been modified. – Frankie Aug 10 '20 at 10:17
  • I managed to adapt the old script to make it work with Angular. However, I would like to improve my understanding : (A) when are `@ViewChild` available in the component lifecycle ? (according to my tests, they are available inside `ngAfterViewInit`. (B) About the `@HostListener('window:message', ['$event'])` : at what moment is it enabled in the component lifecycle ? (C) Is there any documentation so I can understand ['$event'] args possibilities ? Thank you. – Frankie Aug 10 '20 at 15:41

0 Answers0