getElementById Replacement in Angular

To find an element that belongs to an Angular component, give it a template reference and query that reference with @ViewChild. This keeps the lookup scoped to the component instead of searching the whole document by ID. Use ElementRef when component code needs a native element reference, and use Renderer2 for supported DOM operations such as setting a style. These APIs have different jobs; neither is a universal one-to-one replacement for getElementById.

getElementById Replacement in Angular

The browser’s document.getElementById("name") searches the document for an element whose id is name. In an Angular component, a template reference is usually a better fit when the target is part of that component’s own template. For example, add #nameInput to an input in the component template, then query nameInput with @ViewChild in the component class. The reference connects the two without requiring a document-wide lookup or a globally unique ID.

This pattern is useful when the component must read or update a particular control after an event. If the goal is to pass a value between the view and component, Angular template bindings may be a better choice than direct DOM access. Reach for a native element reference only when the task actually needs the element itself, and keep the lookup inside the component that owns the template.

ElementRef in Angular

ElementRef is a wrapper around a native element reference. Its nativeElement property exposes the underlying element; it does not add Angular-specific methods to that element. In the component template, mark the input with #nameInput; in the component class, query that exact name with @ViewChild("nameInput") nameInput!: ElementRef<HTMLInputElement>;. The template reference and query name must match, and the generic type tells TypeScript that the native element is an input.

For a concrete pairing, the template can contain <input #nameInput type="text" value="Ada">. The corresponding class declares @ViewChild("nameInput") nameInput!: ElementRef<HTMLInputElement>; and can read the value in a handler with getValue(): string { return this.nameInput.nativeElement.value; }. Angular resolves the query for the component; call the handler from an event after the view is rendered rather than assuming the reference is ready during construction.

Direct access through nativeElement ties code to the platform’s native DOM. That is appropriate for a narrow task such as reading an input property, but avoid using it as a general substitute for Angular bindings. It also means the code should not assume a browser DOM exists in environments such as server rendering. No Angular version range is asserted here; confirm query syntax and lifecycle details against the version used by your application.

Get Value From the Input Using ElementRef in Angular

To read and reset the input, keep the template and class pieces together. The template can be <input #nameInput type="text" value="Ada"><button (click)="showValue()">Read</button><button (click)="resetValue()">Reset</button>. In the component class, use @ViewChild("nameInput") nameInput!: ElementRef<HTMLInputElement>;, then define showValue(): void { console.log(this.nameInput.nativeElement.value); } and resetValue(): void { this.nameInput.nativeElement.value = ""; }. The #nameInput marker is the template-side reference; the string passed to @ViewChild selects it, and the button bindings invoke the handlers.

This is direct native-element access: the value is read from or written to the input element. If the field is part of a form or application state, prefer a form control or a binding when that better represents the data flow. Those approaches keep the value in Angular’s model and can make validation and updates easier to coordinate. Use ElementRef when the task specifically calls for interacting with the input element, and keep the operation small and clear.

The following plain JavaScript example models only the native input property access used by those handlers. It is not an Angular component; the template reference and @ViewChild pairing above show the framework-specific wiring.

const input = { value: "Ada" };
const component = {
  nameInput: { nativeElement: input },
  getValue() {
    return this.nameInput.nativeElement.value;
  },
  resetValue() {
    this.nameInput.nativeElement.value = "";
  }
};

console.log(component.getValue());
component.resetValue();
console.log(JSON.stringify(input.value));

Ada
""

The Angular snippets above are illustrative template and TypeScript fragments, not standalone runnable examples. Put the markup in the component template and the query and handlers in that component class; runtime evidence is available for the plain JavaScript model only, so no Angular output is claimed.

Angular Renderer2

Renderer2 is an Angular abstraction for supported operations on rendered elements. It is distinct from ElementRef: the latter gives access to a native element reference, while Renderer2 provides methods that perform operations such as adding a class or setting a style. Inject it into the component when an operation needs that abstraction. It does not turn getElementById into an Angular query, and it does not make arbitrary DOM manipulation automatically safe.

To set styles on a component-owned element, add #styledDiv to a div in the template and connect it to a query such as @ViewChild("styledDiv") styledDiv!: ElementRef<HTMLElement>;. Inject Renderer2 in the component constructor. In an applyStyles() handler, call this.renderer.setStyle(this.styledDiv.nativeElement, "background-color", "lightblue"), then call it again with "border" and "1px solid darkblue". A template button can invoke that handler with (click)="applyStyles()".

Keep the template markup in the HTML template and the query, injection, and handler in the TypeScript class; combining both files into one code block can obscure where each piece belongs. These calls illustrate Angular APIs in their component context and are not standalone executable examples. For ordinary presentation changes, a class binding or style binding can be simpler and keeps the condition visible in the template. Use Renderer2 when its rendering abstraction fits the operation, and avoid claiming that it guarantees security or change-detection behavior for every use.

Conclusion: DOM Manipulation in Angular

For an element owned by a component, start with a template reference and @ViewChild rather than a document-wide getElementById search. Use ElementRef and its nativeElement only when code needs the native element, such as reading or resetting an input’s value. Use Renderer2 for supported operations such as setting a style. They complement Angular’s component model in different ways; choose based on the task, and prefer bindings or form controls when they express the desired view and data flow more clearly.