Google AdSense ads in Angular 2 components?

Question

I\'m trying to load some Responsive ads in an AdComponent in my app. The component is dead simple:

import { Component } from \'@angular/core\';
         


        

Answer 1

Based on the above solutions I have created a simple solution that can be easy to implement. This solution works with Angular Universal SSR (server side rendering)

In index.html add script provided from Adsense

In component.ts file,

ngAfterViewInit() {
 try {
   (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
   
   // If you have two ad on the page, then add this again.
   //(window['adsbygoogle'] = window['adsbygoogle'] || []).push({});


 } catch (e) {}
}

In .html file, place ad sense code whenever the ad needs to be displayed.

Update: If ad doesn't show up then, set timeout in component.ts file

    ngAfterViewInit() {
     setTimeout(()=>{
      try {
       (window['adsbygoogle'] = window['adsbygoogle'] || []).push({});
      } catch (e) {}
     },500);
    }

Note: Test your code on registered domain or subdomain. On localhost, the ad will not display.