{"action":"closed","issue":{"url":"https://api.github.com/repos/angular/angular/issues/4906","labels_url":"https://api.github.com/repos/angular/angular/issues/4906/labels{/name}","comments_url":"https://api.github.com/repos/angular/angular/issues/4906/comments","events_url":"https://api.github.com/repos/angular/angular/issues/4906/events","html_url":"https://github.com/angular/angular/issues/4906","id":113330119,"number":4906,"title":"Comunication between components","user":{"login":"emirdeliz","id":6270495,"avatar_url":"https://avatars.githubusercontent.com/u/6270495?v=3","gravatar_id":"","url":"https://api.github.com/users/emirdeliz","html_url":"https://github.com/emirdeliz","followers_url":"https://api.github.com/users/emirdeliz/followers","following_url":"https://api.github.com/users/emirdeliz/following{/other_user}","gists_url":"https://api.github.com/users/emirdeliz/gists{/gist_id}","starred_url":"https://api.github.com/users/emirdeliz/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/emirdeliz/subscriptions","organizations_url":"https://api.github.com/users/emirdeliz/orgs","repos_url":"https://api.github.com/users/emirdeliz/repos","events_url":"https://api.github.com/users/emirdeliz/events{/privacy}","received_events_url":"https://api.github.com/users/emirdeliz/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-10-26T10:51:43Z","updated_at":"2015-10-30T15:12:20Z","closed_at":"2015-10-30T15:12:20Z","body":"I tried use the componente in angular2 as directive. This is code the directive:\r\n```\r\nexport class Datepicker {\r\n    public date : Date;\r\n    public callback : Function;\r\n\r\n    constructor() {\r\n        $('.datepicker').datepicker({\r\n            dateFormat: 'dd/mm/yy',\r\n            dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],\r\n            dayNamesMin: ['D','S','T','Q','Q','S','S','D'],\r\n            dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],\r\n            monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],\r\n            monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],\r\n            nextText: 'Próximo',\r\n            prevText: 'Anterior',\r\n            showOn: 'button',\r\n            buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',\r\n            buttonImageOnly: true,\r\n            onSelect: function(selectedDate) {\r\n                console.log(this.callback);\r\n            }\r\n        });\r\n    }\r\n\r\n    setCallback(fn : Function){\r\n        this.callback = fn;\r\n    }\r\n}\r\n```\r\nIn html:\r\n```\r\n<input class=\"mdl-textfield__input datepicker\" [(ng-model)]=\"datepicker1\" type=\"text\"/>\r\n```\r\nIn my componente use this code:\r\n\r\n```\r\nimport {Component, NgIf, FORM_DIRECTIVES, ElementRef} from 'angular2/angular2';\r\nimport {Datepicker} from '../datepicker/datepicker';\r\n\r\ndeclare function initMaterial();\r\n\r\n@Component({\r\n    selector: 'modal',\r\n    directives: [NgIf, Datepicker, FORM_DIRECTIVES],\r\n    templateUrl: './frontend/components/modal/modal.html',\r\n    styleUrls: ['./frontend/components/modal/modal.css'],\r\n    bindings: [Datepicker]\r\n})\r\n\r\nexport class Modal {\r\n    public isOpen : boolean = false;\r\n    private dtCompromise : Date;\r\n    private dsCompromise : String;\r\n    private datepicker : Datepicker;\r\n\r\n    constructor(datepicker : Datepicker){\r\n        this.datepicker = datepicker;\r\n        this.datepicker.setCallback(function(selectedDate : Date){\r\n            console.log('Date: ' + selectedDate);\r\n        });\r\n    }\r\n}\r\n```\r\nIn html:\r\n```\r\n<form action=\"#\">\r\n    <div class=\"mdl-textfield mdl-js-textfield\">\r\n        <datepicker callback=\"selectDate\" [(ng-model)]=\"datepicker\"/>\r\n        <label class=\"mdl-textfield__label\" for=\"dtCompromisse\">Data</label>\r\n    </div><br>\r\n    <div class=\"mdl-textfield mdl-js-textfield\">\r\n        <textarea class=\"mdl-textfield__input\" type=\"text\" rows= \"5\" [(ng-model)]=\"dsCompromise\"></textarea>\r\n        <label class=\"mdl-textfield__label\" for=\"dsCompromisse\">Descrição</label>\r\n    </div>\r\n</form>\r\n```\r\nWhen selected date function onSelect is called and console.log print undefined\r\n```\r\nonSelect: function(selectedDate) {\r\n   console.log(this.callback);\r\n}\r\n```\r\nWhats is my error?\r\n\r\n"}}