Set callback function in directive angular2

Question

I tried use the componente in angular2 as directive. This is code the directive:

export class Datepicker {
    public date : Date;
    public callback : Function;

    constructor() {
        $('.datepicker').datepicker({
            dateFormat: 'dd/mm/yy',
            dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
            dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
            nextText: 'Próximo',
            prevText: 'Anterior',
            showOn: 'button',
            buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',
            buttonImageOnly: true,
            onSelect: function(selectedDate) {
                console.log(this.callback);
            }
        });
    }

    setCallback(fn : Function){
        this.callback = fn;
    }
}

In html:

<input class="mdl-textfield__input datepicker" [(ng-model)]="datepicker1" type="text"/>

In my componente use this code:

import {Component, NgIf, FORM_DIRECTIVES, ElementRef} from 'angular2/angular2';
import {Datepicker} from '../datepicker/datepicker';

declare function initMaterial();

@Component({
    selector: 'modal',
    directives: [NgIf, Datepicker, FORM_DIRECTIVES],
    templateUrl: './frontend/components/modal/modal.html',
    styleUrls: ['./frontend/components/modal/modal.css'],
    bindings: [Datepicker]
})

export class Modal {
    public isOpen : boolean = false;
    private dtCompromise : Date;
    private dsCompromise : String;
    private datepicker : Datepicker;

    constructor(datepicker : Datepicker){
        this.datepicker = datepicker;
        this.datepicker.setCallback(function(selectedDate : Date){
            console.log('Date: ' + selectedDate);
        });
    }
}

In html:

<form action="#">
    <div class="mdl-textfield mdl-js-textfield">
        <datepicker callback="selectDate" [(ng-model)]="datepicker"/>
        <label class="mdl-textfield__label" for="dtCompromisse">Data</label>
    </div><br>
    <div class="mdl-textfield mdl-js-textfield">
        <textarea class="mdl-textfield__input" type="text" rows= "5" [(ng-model)]="dsCompromise"></textarea>
        <label class="mdl-textfield__label" for="dsCompromisse">Descrição</label>
    </div>
</form>

When selected date function onSelect is called and console.log print undefined

onSelect: function(selectedDate) {
   console.log(this.callback);
}

Whats is my error?

Also check it out this response https://stackoverflow.com/questions/35328652/angular2-pass-callback-function-to-child-component-as-input/35329009#35329009 — Iegor Benzyk, Oct 19 '16 at 15:34

alexpods · Answer 1 · 2015-10-25T23:05:35.603

0

I. Use ViewChild to specify concrete datepicker element and then setCallback in afterViewInit lifecycle method.

import {Component, ViewChild} from 'angular2/angular2';

@Component({
  selector: 'datepicker'
  // ...
})
export class Datepicker {
  // ...
}

@Component({
  selector: 'modal',
  directives: [NgIf, Datepicker, FORM_DIRECTIVES],
  // ...
})
export class Modal {
  //...
  @ViewChild('dp') datepicker : Datepicker;

  afterViewInit() {
    this.datepicker.setCallback(function(selectedDate : Date){
      console.log('Date: ' + selectedDate);
    });
  }
}

and template is:

<form action="#">
    // ...
    <datepicker #dp callback="selectDate" [(ng-model)]="datepicker"/>
    // ...
</form>

II. this inside onSelect function doesn't refer to the datepicker object. To fix it you have three options:

Use bind method to change context of function execution:

export class Datepicker {
  // ...
  constructor() {
    $('.datepicker').datepicker({
      // ...
      onSelect: function(selectedDate) {
        console.log(this.callback);
      }.bind(this)
    });
  }
}

Initialize var self = this outside of the onSelect callback and then use self inside it.

export class Datepicker {
  // ...
  constructor() {
    var self = this;
    $('.datepicker').datepicker({
      // ...
      onSelect: function(selectedDate) {
        console.log(self.callback);
      }
    });
  }
}

Use arrow functions if you're using ES6:

export class Datepicker {
  // ...
  constructor() {
    $('.datepicker').datepicker({
      // ...
      onSelect: (selectedDate) => {
        console.log(this.callback);
      }
    });
  }
}

edited Oct 25 '15 at 23:05

answered Oct 25 '15 at 22:18

alexpods

47,475
10
100
94

Not work. Edit my example in question. it seems there is no link between html and models construtctor ( datepicker : Datepicker ) – Emir Marques Oct 25 '15 at 22:28
When run constructor method this not set callback in object of view. This set in other instance of Datepicker – Emir Marques Oct 25 '15 at 22:29
I've updated the answer. Try to use `ViewChild` annotation – alexpods Oct 25 '15 at 22:38
After @ViewChild('dp') datepicker : Datepicker; variable datepicker is undefined – Emir Marques Oct 25 '15 at 22:46
In the html put as: – Emir Marques Oct 25 '15 at 22:46
`undefined` is in `onInit` callback?? – alexpods Oct 25 '15 at 22:48
In onInit datepicker is undefined when print console.log(datepicker); – Emir Marques Oct 25 '15 at 22:49
Ooh, not `onInit`, try `afterViewInit` – alexpods Oct 25 '15 at 22:52
In afterViewInit console.log(datepicker) print null – Emir Marques Oct 25 '15 at 22:54
Strange, try `@ViewChild(Datepicker)` – alexpods Oct 25 '15 at 22:56
Have you specified that `Datepicker` is directive using `Component` or `Directive` annotation ? – alexpods Oct 25 '15 at 23:08
Using component as example in my question – Emir Marques Oct 25 '15 at 23:10

Set callback function in directive angular2

1 Answers1