EXCEPTION while creating a highlight directive

Question

I am trying to create a simple directive in Angular 2 which highlights the content inside an html element.

Here is my code:

main.ts

import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component} from '@angular/core';
import {HighLightCmp} from "./highlight.component";

@Component({
    selector: 'app',
    template: `

    <div highlight>
        Highlight me.
    </div>
        `,
    directives: [HighLightCmp]
})
class AppCmp{

    constructor(){}
}

bootstrap(AppCmp);

highlight.component.ts

import {ElementRef,Renderer,Directive,OnInit} from "@angular/core";

@Directive({
    selector: "[highlight]"
})
export class HighLightCmp implements OnInit{

    private color: "green";

    constructor(private _elRef:ElementRef,private _renderer:Renderer){}

    ngOnInit(){
        this._renderer.setElementStyle(this._elRef,"background-color",this.color);
    }
}

But I am getting the following exception while running

EXCEPTION: TypeError: Cannot set property 'background-color' of undefined

I re-produced the problem here on plunker

You can see the error message in the console. Any thoughts?

Thanks in anticipation.

Don't know if you saw my answer already. I added a few things. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 16, 2016 at 6:51

Günter Zöchbauer · Accepted Answer · 2016-06-16 06:51:05Z

2

some issues

This changed a while ago, maybe you find this in an outdated example. Since a while the Renderer methods need the nativeElement being passed instead of ElementRef:

this._renderer.setElementStyle(this._elRef.nativeElement, "background-color",this.color);

There is also an error in the variable definition

private color: "green";

should be

private color:string = "green";

alternative approach (preferred)

A better way would be to use @HostBinding() instead

@Directive({
    selector: "[highlight]"
})
export class HighLightCmp implements OnInit{

    @HostBinding('style.background-color')
    private color: "green";
}

@HostBinding() can also be combined with @Input() to be able to pass the value from the outside like [highlight]="red":

    @HostBinding('style.background-color')
    @Input()
    private color: "green";

The only downside of this approach is that the style properties (or attribute and class) names you want to bind to, need to be known at development time, while with your Renderer approach, they can be dynamic (for example passed in to an @Input()

edited Jun 16, 2016 at 6:51

answered Jun 16, 2016 at 6:45

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

1 Comment

Eesa Over a year ago

Thank you @Gunter. I appreciate your help.

Collectives™ on Stack Overflow

EXCEPTION while creating a highlight directive

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related