Unable to access component after external script loaded

General Tech Bugs & Fixes 2 years ago

0 2 0 0 0 tuteeHUB earn credit +10 pts

5 Star Rating 1 Rating

Posted on 16 Aug 2022, this text provides information on Bugs & Fixes related to General Tech. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (2)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer Best Answer 2 years 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
  }
}
profilepic.png
manpreet 2 years 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
  }

0 views   0 shares

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.