Unable to access component after external script loaded

Question

I'm trying to load Google API inside an angular6 app. After the load event has been fired, I can't really change anything in my component.

Have a look at the comments at the last 3 lines of the script

@Component({
  selector: 'my-app',
  template: '{{loaded}}',
})
export class AppComponent  {
  loaded = false;   
  constructor(){
    let node = document.createElement('script');
    node.src = 'https://apis.google.com/js/client.js?onload=__onGoogleLoaded';
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);

    window['__onGoogleLoaded'] = (ev) =>{
      console.log('here!!!!');// <----------------------------WORKING
      this.loaded = true;// <---------------------------------NOT WORKING
    }
    //this.loaded = true; <<----------------------------------WORKING
  }
}

https://stackblitz.com/edit/angular-qvwm3z?file=src%2Fapp%2Fapp.component.ts

John Velasquez · Accepted Answer · 2019-03-13 05:24:30Z

0

Add a ChangeDetectorRef to force your app to check any changes in your component

by doing this

  constructor(
    private changeRef: ChangeDetectorRef
  ){
    let node = document.createElement('script');
    node.src = 'https://apis.google.com/js/client.js?onload=__onGoogleLoaded';
    node.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(node);

    window['__onGoogleLoaded'] = (ev) =>{
      console.log('here!!!!');// <----------------------------WORKING
      this.loaded = true;// <---------------------------------NOT WORKING
      this.changeRef.detectChanges(); <<---------------------------------- add this one
    }
    //this.loaded = true; <<----------------------------------WORKING
  }

answered Mar 13, 2019 at 5:24

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SexyMF Over a year ago

Thank you. Can you explain why is that happening?

John Velasquez Over a year ago

My guess is that on window['__onGoogleLoaded'] the property loaded is successfully changed inside in the component class but the view is not updated, so we just added the ChangeDetectorRef to force the angular to detect any changes in the component class and re-draw your view

Collectives™ on Stack Overflow

Unable to access component after external script loaded

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related