TypeScript Question

Angular2-directives. How can I pass the value into the template from my the directive?

I have the template "starrating.component.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>


I have the component "starrating.component.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; }
}


It's good works!
But I think a best practice it's using Attribute directives. Is that so?
I changed my code like that:
Template "starrating.component.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>


component "starrating.component.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];
}
}


added the directive code "starrating.directive.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 works events into the directive (click, mouseenter and mouseleave).

The span element should be changed when changed the value of the variable "activeStar".
like that:

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


But now value of the variable "activeStar" is defined into my the directive
And I try pass values into the template from directive
I try, but I just can't.

How can I pass the value into the template from my the directive?
Is there method better out there?

Answer

If you specify exportAs you can assign a reference to a template variable and use it like

@Directive({ selector: '[starHighlight]', exportAs: 'activeStar'})
<span class="glyphicon star" aria-hidden="true"
      #ref="activeStar"
      [starHighlight]="star" 
      [class.glyphicon-star-empty]="ref.activeStar >= star? false : true"
      [class.glyphicon-star]="ref.activeStar < star ? false : true"
      >
</span>

(not tested).

Comments