Package Exports
- @netcreaties/ngx-smart-banner
- @netcreaties/ngx-smart-banner/bundles/netcreaties-ngx-smart-banner.umd.js
- @netcreaties/ngx-smart-banner/fesm2015/netcreaties-ngx-smart-banner.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@netcreaties/ngx-smart-banner) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
NgxSmartBanner
Angular service for the imlementation of a smart banner to notify your users about your available app.
This package is inspired by smartbannerjs and smart-app-banner
Peer dependencies
| Dependency | Description |
|---|---|
| @angular/cdk/platform | To determine if the user comes from an android or ios device |
For Angular 12 (ivy enabled) and up > Use v2.* For Angular 11 > 9 Use v1.*
Usage
Add the package as a dependency to your project using:
npm install @netcreaties/ngx-smart-banneryarn add @netcreaties/ngx-smart-bannerAdd the module to your app.module imports:
import { NgxSmartBannerModule } from '@netcreaties/ngx-smart-banner';
...
@NgModule({
imports: [NgxSmartBannerModule],
...
})Import the service in your app.component and initialize with settings
import { NgxSmartBannerService } from '@netcreaties/ngx-smart-banner';
constructor(
private readonly ngxSmartBannerService: NgxSmartBannerService,
private readonly viewContainerRef: ViewContainerRef,
) {
this.ngxSmartBannerService.initialize({
viewContainerRef: this.viewContainerRef,
daysHidden: 15,
daysReminder: 90,
});
}Configuration options
The following configuration options are available
| Option | Default | Description |
|---|---|---|
| viewContainerRef (Required) | NULL | View container ref the service uses to create the component in |
| title | Smart application | Name of your application |
| author | Smartbanner author | The company name, for example |
| price | FREE | Price in string |
| priceSuffix.ios | - On the App Store | Suffix that should be added after price |
| priceSuffix.andorid | - In Google Play | Suffix that should be added after price |
| icon.ios | Icon url for IOS devices, can be relative or absolute | |
| icon.android | Icon url for android devices, can be relative or absolute | |
| closeLabel | Close | Label for close button |
| buttonLabel | VIEW | Label for the view button |
| buttonUrl.ios | Url to store location ex. https://ios/application-url | |
| buttonUrl.android | Url to google play ex. https://android/application-url | |
| enabledPlatforms | ['Android', 'IOS'] | Platforms to be enabled |
| daysHidden | NULL | Days to hide the smart banner after pressing exit button, null for indefinitely |
| daysReminder | NULL | Days to hide the smart banner after pressing the view button, null for indefinitely |
| rating.ios | 5 | Star rating on App store (0-5) |
| rating.android | 5 | Star rating on play store (0-5) |
| hideRating | false | Use this option to hide the rating |
Service events
| Event | Description |
|---|---|
| onOpen | Executes when smart banner is created |
| onClose | Executes when smart banner is destroyed |
TODO
- Create demo
- Add events?