Use TypeScript's getElementById replacement in Angular

Current Location：Home > Learning > WEB FRONT-END > Angular >

Vue React JavaScript Angular CSS HTML

Use TypeScript's getElementById replacement in Angular

Author：JIYIK Last Updated：2025/04/18 Views：

This tutorial guide provides a brief description of replacing AngularJS with TypeScript document.getElementById.

This also provides getElementByIdthe best practices for using in Angular with code examples. We will also see the use of DOM querySelector in TypeScript.

First, let's understand document.getElementByIdthe method in TypeScript and why it is popular among the developer community.

`document.getElementById()`Methods in TypeScript

document.getElementById()is a predefined JavaScript (and TypeScript) method that can be used to operate documenton the object. It returns an element with the specified value, or nothing if the element does not exist null.

document.getElementById()Is one of the most common and popular methods for working with HTML DOM in the developer community.

An important point to remember is that if two or more elements have the same id, document.getElementById()the first element will be returned.

Now, let's look at some coding examples to better understand their purpose and usage.

Consider a tag with some demotext having a unique id h1. Now, in scriptsthe section, if we want to target a particular tag, we use the method documentavailable in the object getElementById().

<!DOCTYPE html>
<html>
<body>

<h1 id="demo">The Document Object</h1>
<h2>The getElementById() Method</h2>
<script>
    document.getElementById("demo").style.color = "red";
</script>

</body>
</html>

Output:

Use getElementById to locate the output of the tag

Now let's consider a more dynamic example: an input field that accepts a number and returns its cubed value.

<!DOCTYPE html>
<html>
<body>

<form>
    Enter No:<input type="text" id="number" name="number"/><br/>
    <input type="button" value="cube" onclick="getcube()"/>
</form>

<script>
    function getcube(){
        var number=document.getElementById("number").value;
        alert(number*number*number);
    }
</script>

</body>
</html>

Output:

Use getElementById to get the output of the number

Now, let's look at the replacement in Angular using TypeScript getElementById.

Using TypeScript in Angular Use `ElementRef`as `getElementById`a replacement

AngularJs's ElementRefis a wrapper around the HTML element that contains the attributes nativeElementand holds a reference to the underlying DOM object. Using ElementRef, we can manipulate the DOM in AngularJs using TypeScript.

By using ViewChild, we can get the HTML element's in the component class ElementRef. Angular allows injecting directive elements when a component's directive is requested in the constructor ElementRef.

Using @ViewChildthe decorator, we use the interface in the class ElementRefto get the element reference.

Consider the following code example from main.component.htmla .js file AngularJs. We have a button with an event and a myNamediv with a unique ID:

# angular

<div #myName></div>

<button (click)="getData()">Get Value</button>

Output:

HTML button to get value

Example 1 ( app.component.ts):

#angular
import { Component, VERSION, ViewChild, ElementRef } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "./main.component.html",
    styleUrls: ["./app.component.css"]
})

export class AppComponent {
    name = "Angular " + VERSION.major;
    @ViewChild("myName") myName: ElementRef;
    getData() {
        console.log(this.myName);
        this.myName.nativeElement.innerHTML = "I am changed by ElementRef & ViewChild";
    }
}

Output:

Output uses ElementRef to get a reference to the input

Using @ViewChildthe decorator, we get a reference to the input with the help of the interface in the class ElementRef. Then, we change its value using getData()the function with this reference.

Example 2 ( app.component.ts):

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

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

    @ViewChild("ipt", { static: true }) input: ElementRef;

    ngAfterViewInit() {
        console.log(this.input.nativeElement.value);
    }

    onClick() {
        this.input.nativeElement.value = "test!";
    }
}

Output:

Use ElementRef output to get a reference to the input and change the text

This will get a reference to the input field and change its inner text when the button is clicked.

Previous：Select an option in the Angular drop-down menu

Next：Drag and drop in Angular

For reprinting, please send an email to 1244347461@qq.com for approval. After obtaining the author's consent, kindly include the source as a link.

Article URL：

JIYIK CN >