11

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?

Improve this question

3 Answers 3

Reset to default
14

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")

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

5 Comments

Can I do it using @HostBinding() by any chance?
Yet to try this, but the link was broken so: angular.io/api/core/Renderer#setElementProperty
Thanks, @theSiberman. I updated the answer to use your new link.
Adam: Is there a way to set an @Input property to the host using renderer2 ? set [(color)] property to the Host element.
Note in angular 5 it is now setAttribute using renderer 2: this.renderer2.setAttribute(element, 'name', data)
12

You an use @HostBinding like 

export class Checker {

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

Comments

6

You can simply declare the host property in the @Directive as follows:

@Directive({
    selector: "[Checker]",
    host: { "spellcheck":"true" }
})

And obviously you can remove the setAttribute() which you are using in the ngOnInit().

Improve this answer

7 Comments

It would actually need to be "attr.spellcheck" : "true", and it's just the alternative syntax to @HostBinding(). Everything you can do with Angular decorators, @Input(), @Output(), @ViewChild(), @HostListener(), ..., can be done with host: as well.
@GünterZöchbauer I actually tried without attr, and it is working too. I am not sure which is the right way. I didn't try it with attr.spellcheck though.
If you bind to a components input or DOM elements property, then attr. is not required, otherwise attr. is required.
@GünterZöchbauer got it :)
Actually you were right. What I said is true for bindings in view like [attr.spellcheck]="true" and in @HostBinding('attr.spellcheck') sp = true;, but in host: {"spellcheck":"true"} attr. is not required. plnkr.co/edit/RyCb9Cs4g5J6fociXfKl?p=preview
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.