How to set attributes on an element in Angular 2?

Question

I have a simple Directive as follows:

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

@Directive({
    selector: "[Checker]"
})
export class Checker {

    constructor(private e: ElementRef) {

    }

    OnInit() {
        this.e.nativeElement.setAttribute("spellcheck", "true");
    }

    keyFunc(event: KeyboardEvent) {
        if (event.keyCode == 74) {
            //more functionality
        }
    }

}

So, whenever I add this directive selector to any tag, I set the spellcheck attribute to true.

How can I set this attribute in an Angular2 way, i.e. what is the alternative Angular way to do this?

Answer 1

The 'Angular 2' way would be to use Renderer.

this.renderer.setElementAttribute(e.nativeElement, "spellcheck", "true");

Edit:

As PeterS notes in the comments below, renderer has been deprecated in favour of renderer2, so the new command would be:

this.renderer2.setAttribute(e.nativeElement, "spellcheck", "true")

Answer 2

You an use @HostBinding like

export class Checker {

  @HostBinding('attr.spellcheck')
  spellcheck:boolean = true;