title: Using AngularJS component props
body: <p>everybody. I'm new to angularJS, and now i'm trying to realize some patrs. Here is my code below.</p>
  
  <p>The questions is: how do i get access to callback onFinish() wich is passed to component "my-timer" and run it?  this.onFinish() returns the error.</p>
  
  <p>Here is my markup:</p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="MyCtrl as myCtrl"&gt;
    &lt;div&gt;
      Status: {{myCtrl.status ? myCtrl.status : 'Waiting...'}}
    &lt;/div&gt;
  
    &lt;div&gt;
      &lt;button ng-click="myCtrl.addTimer(5)"&gt;Add timer&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div ng-repeat="timer in myCtrl.timers"&gt;
      &lt;div&gt;
        &lt;h3&gt;Timer {{timer.id}}&lt;/h3&gt;
        &lt;button ng-click="myCtrl.removeTimer($index)"&gt;X&lt;/button&gt;
        &lt;my-timer id="{{timer.id}}" start-seconds="{{timer.seconds}}" on-finish="myCtrl.onFinish(endTime)"&gt;&lt;/my-timer&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is index.js</p>
  
  <pre><code>var app = angular.module('app', []);
  
  app.controller('MyCtrl', class {
        constructor($scope) {
          this.status = null;
          this.timerId = 0;
          this.timers = [];
          this.addTimer(10);
          this.addTimer(3);
        console.log($scope);
        }
  
    addTimer(seconds) {
      this.timers.push({
        id: this.timerId++,
        seconds
      });
    }
  
    removeTimer(index) {
      this.timers.splice(index, 1);
    }
  
  onFinish(endTime){
      this.status = `Timer finished at ${endTime}`;
    console.log(endTime);
  }
  
  });
  
  app.component('myTimer', {
    bindings: {
      id: '@',
      startSeconds: '@',
      onFinish: '&amp;',
    },
  
    controller: function($interval, $scope) {
      this.endTime = null;
  
  this.$onInit = function() {
    this.countDown();
  };
  
  this.countDown = function() {
    $interval(() =&gt; {
      this.startSeconds = ((this.startSeconds - 0.1) &gt; 0) ? (this.startSeconds - 0.1).toFixed(2) : 0;
    }, 100);
  }; 
    },
  template: `&lt;span&gt;{{$ctrl.startSeconds}}&lt;/span&gt;`,
  });
  </code></pre>
  
  <p>And here is <a href="http://jsfiddle.net/paulkotov/bp67uzy1/133/" rel="nofollow noreferrer">jsFiddle</a></p>