Reference Specific Element in an Angular 2 Component?

Question

I have an element in an ng2 component that I want to manipulate directly. I don't need or want its properties to be handled by the framework because its properties will be updated on a second-by-second basis and I don't want it affecting the lifecycle. In my example (not the actual use case) I will use a timer that increments per second.

HTML-

<div class="timer"></div>
<div>Elapsed</div>

Component-

@Component({
  selector: 'timer',
  templateUrl: 'timer.html',
})
export class TimerComponent {

  private time = 0;

  // How do I get .timer ?
  constructor(private $element: ElementRef) {}

  onNgInit() {
    setInterval(this.incrementTimer.bind(this), 1000);
  }

  private incrementTimer() {
    this.time++;
    this.$element.nativeElement.innerHTML = this.time;
  }

}

I have a number of options to get the timer element, but I'm wondering if there is an easy way (an angular way) to label the element so that angular will understand/include it in the injector. I'd prefer not to search the DOM for this element, and I prefer not to tap the lifecycle every time I want to update.

JayChase · Accepted Answer · 2016-11-26 03:47:20Z

5

You can use ViewChild and a template reference variable to get the element in the component. For example set the template ref #timer on the timer div:

<div class="timer" #timer></div>
<div>Elapsed</div>

Then in the component you can get the timer and manipulate it using the Renderer (note that this is in AfterViewInit to make sure the element has been rendered):

  import { Component, AfterViewInit, ViewChild, ElementRef, Renderer } from '@angular/core';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements AfterViewInit {
    @ViewChild('timer') timer: ElementRef;

    constructor(private renderer: Renderer) { }

    ngAfterViewInit() {
      this.renderer.setElementProperty(this.timer.nativeElement, 'innerText', 'hello');
    }
  }

edited Nov 26, 2016 at 3:47

answered Nov 26, 2016 at 3:33

JayChase

11.6k3 gold badges52 silver badges55 bronze badges

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

1 Comment

micah Over a year ago

I was wonder what the #keyword was for. This makes sense. Thanks, JayChase!

Collectives™ on Stack Overflow

Reference Specific Element in an Angular 2 Component?

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