Convert $window.UserSettings array from angularjs component to angular 8 component

Question

I have an angularjs 1.7 component which I need to upgrade to angular 8 component. It has an external script, which I cannot modify. That script inserts an iframe into the div and it expects some settings from the component to customize the iframe.

The old component code:

angular.module('myApp.shared').component("userExternal", {
  template: '<div id="userIframe"></div>',
   controller: function ($window) {
      this.scriptUrl = "//myurl/widget/addIframe.js";
      this.$onInit = function () {
            $window.UserSettings = [];
            $window.UserSettings.push(['set', {
                btn_color: '#008A00',
                bg_color: 'white'
            }]);                
        });
     };
  }
});

I have two problems here:

I don't know how to convert $widnow to angular 8 window object.
When I convert $window to angular 8 window, how can I add UserSettings array to it?

This is my angular 8 component, but my code did not work correctly.

HTML Template

<script src="//myurl/widget/addIframe.js"></script>
<div class="user_external></div>

TS Code

import { Component} from '@angular/core';    
@Component({
   selector: 'app-user',
   templateUrl: './user-external.component.html'
})
export class UserExternalComponent {
 constructor() {      
} 
ngOnInit() {
    window.UserSettings = [];
  
   window.UserSettings.push(['set', {
      btn_color: '#008A00',
      bg_color: 'white'
   }]);          

    console.log(window);
  }
}

Thank you

score 0 · Answer 1 · answered Jun 30 '21 at 23:36

Following a combination of this tutorial for the window reference and this tutorial for upgrading from AngularJS to Angular in general, I created an injectable service that seems to be doing the job, at least so far in a downgraded context. (Next step is to start upgrading the modules that use the dependency, but I successfully replaced all AngularJS injections of $window with my new APIWindow class, and everything works as before with no breaking errors.)

Keeping in mind this is being used as a downgraded Angular class inside a currently mostly AngularJS app, the class looks like this:

// api.window.service.ts

import { Injectable } from '@angular/core'
import { downgradeInjectable } from '@angular/upgrade/static'
import * as angular from 'angular'

// You could change this to return any property on Window, but external is the one I use:
function _external (): any {
  return window.external
}

@Injectable()
export class APIWindow {
  get external (): any {
    return _external()
  }
}

angular
  .module('APIModule')
  .service('APIWindow', downgradeInjectable(APIWindow))

Hopefully this helps someone else with a similar situation following this upgrade path!

Convert $window.UserSettings array from angularjs component to angular 8 component

1 Answers1