interface DirectiveOptions {
    exportAs?: string;
    selector: string;
    successors?: string[];
    zone?: ZoneType;
}

Properties

exportAs?: string

export this directive to the HTML template scope,

it can be accessed by the template reference name ex:




Directive({
selector: '*tooltip',
exportAs: 'tooltip'
})

in your component

<a tooltip="I'm a tooltip!!" #tooltip="tooltip">I'm a link</a>
<button (click)="tooltip.toggleTooltip()">Toggle tooltip</button>
selector: string

the name of the directive which is used in the template

a structural directive name should start with *, and an attributes directive should not.

successors?: string[]

name of possible structure directives successor

zone?: ZoneType
  • use manual for no zone.js patch effect applied, and used for manual change detection for heavily process components.

  • use proxy zone for automatic detect changes without use of zone.js

  • use aurora for detection events like rxjs observables, setTimeout, setInterval and fetch and XMLHttpRequest, etc... make sure that zone.js is imported in the polyfills module.

if no value specified, the value will be initialized by the custom element web component zone,

  • if the web component zone is manual, the directive zone also will be manual, expect weird behavior.
  • if the web component zone is proxy, the directive zone also will be proxy.
  • if the web component zone is aurora, the directive zone also will be aurora and will get the benefit of zone.js.