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-banner

yarn add @netcreaties/ngx-smart-banner

Add 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?