Attribute directive @Input alias in Angular 2

Question

I am learning attribute directives in Angular 2. When using @Input alias in attribute directives, It will not work, why?

component

<p appHighlight = "color">Hightlight Me</p>

directive

export class HighlightDirective {

  @Input('appHighlight') highlightcolor: string;

  constructor(
    // ElementRef is a service that grants direct access to the DOM element through its nativeElement property.
    private el: ElementRef
  ) {
    // el.nativeElement.style.backgroundColor = 'yellow';
  }


  // @HostListener decorator lets you subscribe to events of the DOM element that hosts an attribute directive
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightcolor || 'red');
  }

  @HostListener('mouseleave') onmouseleave() {
    this.highlight(null);
  };

  private highlight(color: string) {
    this.el.nativeElement.style.backgroundColor = color;
  }

}

this.highlight(null) ?? How can you set a background as null ? It should be ' transparent' right? — RemyaJ
– RemyaJ, Commented Apr 14, 2017 at 5:43
@RemyaJ This is not the point. I am reading the document here angular.io/docs/ts/latest/guide/attribute-directives.html — ChenLee
– ChenLee, Commented Apr 14, 2017 at 5:45

eko · Accepted Answer · 2017-04-14 05:56:28Z

4

The notation should be like this:

<p myHighlight [appHighlight]="color">Hightlight Me</p>

with the brackets

Assuming the selector is:

@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {

  constructor(private el: ElementRef) { }

  @Input('appHighlight') highlightcolor: string;
  ...

Plunker example: http://plnkr.co/edit/vqZ4gjHc1KNFro62HlVJ?p=preview

edited Apr 14, 2017 at 5:56

answered Apr 14, 2017 at 5:41

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

RemyaJ · Accepted Answer · 2017-04-14 05:51:28Z

1

From angular docs -

<p HighlightDirective [appHighlight]="inputtedColor">text to highlight</p>

answered Apr 14, 2017 at 5:51

RemyaJ

5,5264 gold badges25 silver badges42 bronze badges

3 Comments

eko Over a year ago

Your answer is wrong, OP did not share the directives selector in the question and class name will give an error that it's not bindable to p since it's not a known property if selector is something else.

RemyaJ Over a year ago

How can you give input without specifying where to pass the input to. Ok. Now you edited. Now its right

eko Over a year ago

Yes I made it in the plunker but forgot to add it in my answer :-)

Collectives™ on Stack Overflow

Attribute directive @Input alias in Angular 2

component

directive

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

component

directive

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related