Angular2-директивы. Как я могу передать значение в шаблон из моей директивы the?

У меня есть шаблон " starrating.деталь.html "

<ng-container *ngFor="let star of arrayStarts">
    <span class="glyphicon star" aria-hidden="true"
          [class.glyphicon-star-empty]="activeStar>=star? false : true"
          [class.glyphicon-star]="activeStar<star ? false : true"
          (click)="clickStar(star)"
          (mouseleave)="mouseleaveStar(star)"
          (mouseover)="mouseoverStar(star)" >
    </span>
</ng-container>

У меня есть компонент " starrating.деталь.ts "

import { Component } from '@angular/core';
@Component({
    selector: 'star-rating',
    templateUrl: 'app/starrating/templates/starrating.component.html',
    styleUrls: ['app/starrating/css/style.css']
})

export class StarRatingComponent {
    public arrayStarts;
    public activeStar;
    public selectedStar;
    constructor() {
        this.arrayStarts = [1, 2, 3, 4, 5];
        this.activeStar = 0;
        this.selectedStar = -1;
    }
    mouseoverStar = function (star) {this.activeStar = star;}
    mouseleaveStar = function (star) {this.activeStar = this.selectedStar || 0;}
    clickStar = function (star) { this.selectedStar = star; }
}

Это хорошие дела! Но я думаю, что лучшая практика-это использование директив атрибутов. Так ли это? Я изменил свой код вот так: Шаблон "starrating.деталь.html "

<ng-container *ngFor="let star of arrayStarts">
    <span class="glyphicon star" aria-hidden="true"
          [starHighlight]="star" 
          [class.glyphicon-star-empty]="activeStar>=star? false : true"
          [class.glyphicon-star]="activeStar<star ? false : true"
          >
    </span>
</ng-container>

Компонент "starrating.деталь.ts "

import { Component } from '@angular/core';
@Component({
    selector: 'star-rating',
    templateUrl: 'app/directives/starrating/templates/starrating.component.html',
    styleUrls: ['app/directives/starrating/css/style.css']
})
export class StarRatingComponent {
    public arrayStarts;
        this.arrayStarts = [1, 2, 3, 4, 5];
    }
}

Добавлен код директивы " starrating.директива.ts "

 import { Directive, ElementRef, Input, Output, Renderer, HostListener } from '@angular/core';

    @Directive({ selector: '[starHighlight]'})

    export class StarHighlightDirective {

        constructor(private el: ElementRef, private  renderer: Renderer) { }

        private _selectedStar = -1;
        private _activedStar = 0;

        @Input('starHighlight') star: any;
        @Input('activeStar') activeStar: any;

        @HostListener('mouseenter') onMouseEnter() {this._activedStar = this.star;}
        @HostListener('click') onMouseCick() { console.log('onMouseCick: set star:', this.star);}
        @HostListener('mouseleave') onMouseLeave() { this._activedStar = this._selectedStar || 0;  }
 }

Perfect работает с событиями в директиве (click, mouseenter и mouseleave).

Элемент span следует менять при изменении значения переменной "activeStar". вот так:

[class.glyphicon-star-empty]="activeStar>=star? false : true"

Но теперь значение переменной "activeStar" определено в мою директиву И я пытаюсь передать значения в шаблон из директивы Я пытаюсь, но просто не могу.

Как я могу передать значение в шаблон из моей директивы the? Есть ли способ лучше там?