Product Promotion
0x5a.live
for different kinds of informations and explorations.
GitHub - scttcper/ng2-adsense: Angular Adsense Component
Angular Adsense Component. Contribute to scttcper/ng2-adsense development by creating an account on GitHub.
Visit SiteGitHub - scttcper/ng2-adsense: Angular Adsense Component
Angular Adsense Component. Contribute to scttcper/ng2-adsense development by creating an account on GitHub.
Powered by 0x5a.live 💗
ng2-adsense
Easy AdSense for Angular Applications
Demo: https://ng2-adsense.xmplaylist.com/
Install
npm install ng2-adsense
Dependencies
Latest version available for each version of Angular
ng2-adsense | Angular |
---|---|
5.4.3 | 5.x 6.x 7.x |
6.0.3 | 8.x |
8.0.1 | 9.x |
9.1.0 | 10.x 11.x |
10.1.0 | 12.x 13.x |
11.0.0 | 14.x |
12.0.0 | 15.x |
13.0.0 | 16.x |
current | >=17 |
Use
Add adsense code
Use the standard AdSense code somewhere in your <head></head>
as you normally would
<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>
Import NgModule
Add AdsenseModule to the imports of your NgModule
import { AdsenseModule } from 'ng2-adsense';
@NgModule({
imports: [
// shown passing global defaults (optional)
AdsenseModule.forRoot({
adClient: 'ca-pub-7640562161899788',
adSlot: 7259870550,
}),
...
Show Ad
Uses global defaults which can be overriden via inputs
<ng-adsense></ng-adsense>
Inputs
input | type | description |
---|---|---|
adClient | string | account ca-pub-XXXXXXXXXXXXXXXX |
adSlot | string/number | ad slot/number |
adFormat | string | adsense ad format |
adRegion | string | older adsense code to make all ads on page the same |
display | string | element display style |
fullWidthResponsive | boolean | enable full width responsive ad |
height | number | element height in px |
width | number | element width in px |
layout | string | used for in-feed ads |
layoutKey | string | used for in-feed ads |
pageLevelAds | boolean | enable page-level ads |
adtest | string | sets up some sort of google test ad |
className | string | add custom class names to the "ins" element |
<ng-adsense
[adClient]="'ca-pub-7640562161899788'"
[adSlot]="7259870550"
[display]="'inline-block'"
[width]="320"
[height]="108"
></ng-adsense>
Angular Resources
are all listed below.
Learn how to build apps with modern reactive and declarative code
resource
~/modernangular.com
resource
Ultimate Angular™ - Learn Everything You Need To Master Angular
resource
~/ultimatecourses.com
resource
angular | Software Development » Web Development » Javascript | Gumroad
resource
~/gumroad.com
resource
GitHub - Jaspero/ng-slider: A light slider with no external dependencies
resource
~/github.com
resource
AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid
resource
~/www.ag-grid.com
resource
GitHub - fundsaccess/angular-iban: IBAN directives and pipes for Angular
resource
~/github.com
resource
GitHub - ngneat/reactive-forms: (Angular Reactive) Forms with Benefits 😉
resource
~/github.com
resource
GitHub - iamguid/ngx-mf: Bind your model types to angular FormGroup type
resource
~/github.com
resource
Made with ❤️
to provide different kinds of informations and resources.