yandex
loader

please wait

  • Vikrant Srivastava Mar-13-2019 06:25:50 AM ( 2 months ago )

    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
      }
    }
  • Priya Roy Mar-13-2019 06:27:15 AM ( 2 months ago )

     

     

    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
      }

Please login

Similar Discussion

Recommended For You