How to change the code from JavaScript to the Angular/Typescript way

Question

I have this code:

app.component.ts

    export class AppComponent implements AfterViewInit {

      targetElement: HTMLElement;
      viewer: any;

      constructor () {}

      ngAfterViewInit() {
       this.targetElement = document.getElementById('wrapper'); // This line
      }


  app.component.html



    <div #wrapper id="wrapper" [innerHTML]=targetElement></div>

I don't want to use

document.getElementById('wrapper');

Is there an Angular way to change the line marked: // This line?

alt255 · Accepted Answer · 2020-05-10 15:00:02Z

The Angular way is to use template reference with @ViewChild decorator

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

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

  constructor() {}

  ngAfterViewInit() {
   //use this.test
  }
}

Note this line @ViewChild('#wrapper') test: ElementRef; wrapper refers to the template reference on the html element

Another way would be to directly inject ElementRef in constructor.

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

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

  constructor(private elem: ElementRef) {}

  ngAfterViewInit() {
    this.elem.nativeElement.querySelector('#wrapper');
  }
}

Arun Mohan · Accepted Answer · 2020-05-10 14:53:44Z

1

Template ref can be used if you want to access the dom.

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

export class AppComponent implements AfterViewInit {

  @ViewChild('wrapper')
  wrapper: ElementRef
  viewer: any;

  constructor () {}

  ngAfterViewInit() {
  }

}


  <div #wrapper></div>

this.wrapper will have the dom node which can be used to access

answered May 10, 2020 at 14:53

Arun Mohan

1,2271 gold badge7 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to change the code from JavaScript to the Angular/Typescript way

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related