How to use Browser-Update.org with Angular 9?

I would like to use Browser.org's snack bar to display hints if the user's browser is not supported.

The documentation from Browser.org says that the script should be integrated into the index.html (before the closing body tag). If I do it this way, it works as intended. So in the index.html it looks like this:

  <script>
    var $buoop = {required:{e:-4,f:-3,o:-3,s:-1,c:-3},insecure:true,api:2020.10 };
    function $buo_f(){
    var e = document.createElement("script");
    e.src = "//browser-update.org/update.min.js";
    document.body.appendChild(e);
    };
    try {document.addEventListener("DOMContentLoaded", $buo_f,false)}
    catch(e){window.attachEvent("onload", $buo_f)}
  </script>

However, I don't have a good feeling about including something in the index.html and instead tried to include and rewrite it inside my app.component.ts. Unfortunately, my approach doesn't work:

app.component.ts

export class AppComponent {
  constructor() {
    const $buoop = {required: { e: -4, f: -3, o: -3, s: -1, c: -3 }, insecure: true, api: 2020.10 };
    try {
      document.addEventListener('DOMContentLoaded', this.$buo_f, false)
    } catch (e) {
      (window as any).attachEvent('onload', this.$buo_f);
    }
  }

  $buo_f() {    
    const e = document.createElement('script');
    e.src = '//browser-update.org/update.min.js';
    document.body.appendChild(e);
  }
}

What am I doing wrong or is there someone who has already had experience with it and can help? Maybe there is a way to do it in Typescript oder "The Angular way"? I'm also not sure my code has been rewritten correctly and makes sense.