This.sanitizer is undefined outside NgOninit function (Angular, TS)

Question

First, I imported DomSanitizer to the component:

import { DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

After that, I created a class and added it to the constructor:

 export class BlocklyComponent implements OnInit {
      primaryWorkspace: Blockly.WorkspaceSvg;
      GEE = "PCFET0NUWVBFIGh0bWw+Cgo8aGVhZD4KPG1ldGEgY29udGVudD0idGV4dC9odG1sOyBjaGFyc...";
    public geeMap: SafeResourceUrl;
      constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {

Inside the NgOnInit function it works correctly, however, in the updateURL function (outside NgOnInit but inside the class) it says that this.sanitizer is undefined:

//Creates de src that has to be in the iframe. What I need to do is to update this safeResourceUrl.
        this.geeMap = this.sanitizer.bypassSecurityTrustResourceUrl(`data:text/html;base64,${this.GEE}`);

        //Reads the events in a workspace. When it notices a change, it triggers the updateURL function

        primaryWorkspace.addChangeListener(this.updateURL);

      }
      updateURL(primaryEvent) 
         {
          if (primaryEvent.isUiEvent) {
            return; //Do not clone ui events 
          };
          console.log('hola');
         //Problem. Here it sais that this.sanitizer is undefined.
          this.geeMap = this.sanitizer.bypassSecurityTrustResourceUrl(`data:text/html;base64,${this.GEE}`);
        }

I know that this is a typical problem that has happened to me many times, however now I don't know how to solve it. I have tried to look for the undefined problem in different forums but I still couldn't be able to solve it. Thank you very much

Lakshya Thakur · Accepted Answer · 2021-03-09T12:34:32.567

0

Since you're going out of the Angular flow of binding events, you can add the event listener in two ways to take care of the correct this :-

Arrow functions (inside ngOnInit) :-

primaryWorkspace.addChangeListener((event)=>this.updateURL(event));

.bind (inside constructor) :-

this.updateURL = this.updateURL.bind(this);

And in ngOnInit :-

primaryWorkspace.addChangeListener(this.updateURL);

Also I think you meant addEventListener('change',...) instead of addChangeListener.

edited Mar 09 '21 at 12:34

answered Mar 09 '21 at 11:14

Lakshya Thakur

8,030
1
12
39

1

Thank you very much Lakshya. The second option worked for me perfectly. I was in a real struggle with this error and you have resolved it. Regarding the addEventListener you told me, I can't write it cause I'm using the Blockly library and events need to be read with addChangeListener. Thank you again – Sam Mar 09 '21 at 12:05

This.sanitizer is undefined outside NgOninit function (Angular, TS)

1 Answers1