Angular2 Directive

Angular2 Directive extension for at.js library provides a "flicker-free" implementation of an mbox Target directive, to be used in Angular2 components.

Prerequisites:

1. AT.js library
2. Angular2 app

Integration Instructions:

1. Include at.js in your .angular-cli.json's scripts configuration array;
2. Install the extension from NPM: npm install @adobe/target-ng-module -P;
3. Import Target directive and service in your AppModule:

import ...
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify Target library as an import
    TargetModule
  ],
...

1. Once the library is imported, you can use Target mbox directive in your Angular application:

// Specify Target options in your app.component.ts 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  targetOpts = {
    mbox: 'simpleDirective'
  };
}

<!-- You can now use Target mbox directive in app.component.html -->
<div [mbox]="targetOpts">
  Default content
</div>

Demo

Angular2 Directive Example