Call function outside of angular directive component

Question

Is there a way to call a function in my directive, but outside of component?

Example:

<ion-input #bar barcodeScanner></ion-input>
<button (click)="bar.start()" type="button">
   <i class="my-icons-scaner"></i>
</button>

Directive:

@Directive({
  selector: '[barcodeScanner]'
})
export class BarcodeScannerDirective implements OnInit {

constructor(private _element: ElementRef) {}

 ngOnInit() {
    const element = this._element.nativeElement
    console.log({ element })
 }

 public start(){
    console.log('start?')
 }

}

Answer 1

Use exportAs property on the Directive decorator like this

Defines the name that can be used in the template to assign this directive to a variable.

directive.ts

@Directive({
  selector: '[barcodeScanner]',
  exportAs: 'barcodeScanner'
})

Then we can access our barcodeScanner instance anywhere in our template:

<ion-input #bar="barcodeScanner" barcodeScanner></ion-input>
<button (click)="bar.start()" type="button">
   <i class="my-icons-scaner"></i>
</button>