4

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.

Eric Martinez
  • 31,277
  • 9
  • 92
  • 91
Angel Angel
  • 19,670
  • 29
  • 79
  • 105

1 Answers1

4

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.

Eric Martinez
  • 31,277
  • 9
  • 92
  • 91
  • I have seen using this.element.nativeElement as the target parameter in Observable.fromEvent. Does this answer fits well for this case or do you have some 'legal' alternatives? – Nad G Jul 11 '18 at 13:55