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 { TargetModule } from '@adobe/target-ng-module';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify Target library as an import
    TargetModule
  ],
...

4. 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>

Options

Additional Target options can be specified in targetOpts, such as timeout and at.js params.
For more details, check out the extension README and see the demo in action.

Demo

Angular2 Directive Example