Is it possible to upgrade angularjs atttribute directives to use in angular 4?

Question

I\'ve been able to upgrade an angularjs element directive to be used in angular 4. Here\'s a sample code:

[myScores.js]

angular.module(\         


        

Answer 1

A Attribute directive can totally have the Input property which can be passed to it from the tag where it's used : For ex:

<p highlightThis [highlightColor]="'orange'" [count]="5">Highlighted in orange</p>

Also make sure your appModule/SharedModule imports it.

So the problem i see is with the way you are defining your structural directive. A structural directive doesn't have any template structure attached to it. It applies to any html tag where it's used.

For you case, i see you are extending the directive with Component class which is not acceptable to a Attribute directive :--

MakeGreenDirective extends UpgradeComponent {

You should keep the Attribute Directive separate from any Component. For Ex:

  import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from 
  '@angular/core';

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

 export class HighLightThisDirective {
 @Input() count: number;
 @Input() highlightColor: string;
 @Output() clicked: EventEmitter<number>;

 constructor(private elementRef: ElementRef, injector: Injector) {  }

 ngOnInit(): void {
   this.decorateMyTag();
 }

 private decorateMyTag(): void {
   console.log("highlightColor", this.highlightColor);
   this.elementRef.nativeElement.style.backgroundColor = this.highlightColor;
  }
}