What are some good alternatives to accessing the DOM using nativeElement in Angular2?

Question

Taking as an example the following code, which are good alternatives to accessing the DOM using nativeElement

import {Component, Directive, Input, ElementRef} from 'angular2/core';

@Directive({
    selector: '[myDR]',
    host:{
        '(mouseenter)' : ' mouseEnter()'
    }
})

export class MyDi {

    @Input () myColor: string;

    constructor(private el:ElementRef) {

    }

    mouseEnter(){

        this.el.nativeElement.style.backgroundColor = this.myColor;

        console.log(this.myColor);
     }
}

This is a Plunker for you test more easy.

Answer 1

Since accessing directly to DOM through nativeElement is discouraged you have three options

• Using host property (this will set the color immediatly)

@Directive({
    host:{
        '(mouseenter)' : ' mouseEnter()',
        '[style.background-color]' : 'myColor'
    }
})

mouseEnter(){
    this.myColor = 'blue';
}

• Using @HostBinding (this case will set the color immediatly)

@HostBinding('style.background-color') get color {
    return this.myColor;
}

mouseEnter(){
    this.myColor = 'blue';
}

• Using Renderer (use this instead of nativeElement.style = 'value')

constructor(public renderer: Renderer, public element: ElementRef) {}

mouseEnter(){
  this.renderer.setElementStyle(this.element.nativeElement, 'background-color', this.myColor);
}

Note that host and @HostBinding are equivalent.