Welcome to this comprehensive guide on Angular's ElementRef and Renderer2! In this lesson, we'll delve deep into these powerful tools, learning how to manipulate DOM elements and understand their role in real-world projects. Let's get started! šÆ
Angular is an open-source JavaScript framework used for building dynamic web applications. It's a powerful tool that helps developers create complex, scalable, and maintainable applications efficiently.
In Angular, ElementRef and Renderer2 are essential services for interacting with the DOM (Document Object Model). They enable us to manipulate, query, and create DOM elements and add dynamic behavior to our applications.
ElementRef provides a reference to the element that the current component is associated with. It is injected into the component's constructor via Angular's dependency injection system.
By using the ElementRef, we can access the native DOM element associated with our Angular component.
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<h1 #titleRef>My Title</h1>
`
})
export class MyComponent {
@ViewChild('titleRef') titleRef: ElementRef;
changeTitle() {
this.titleRef.nativeElement.textContent = 'New Title';
}
}š Note: In the example above, ViewChild is used to get a reference to the HTML element with the id 'titleRef'. The changeTitle method then modifies the text content of the element.
What is ElementRef used for in Angular?
Renderer2 is a service that allows us to manipulate the DOM programmatically. It can be used to create, query, and manipulate DOM elements.
Using Renderer2, we can create new DOM elements, set their properties, and append them to existing elements in our application.
import { Component, ViewChild, Renderer2 } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<div></div>
`
})
export class AppComponent {
constructor(private renderer: Renderer2) {}
createParagraph() {
const div = document.querySelector('div');
const paragraph = this.renderer.createElement('p');
this.renderer.setProperty(paragraph, 'textContent', 'New paragraph');
this.renderer.appendChild(div, paragraph);
}
}š Note: In the example above, the createElement, setProperty, and appendChild methods of Renderer2 are used to create a new <p> element, set its text content, and append it to the existing <div>.
What is Renderer2 used for in Angular?
Let's put these concepts into practice by building a simple dynamic To-Do List application.
import { Component, Renderer2 } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<ul>
<li *ngFor="let item of items; let i = index">
{{ item }}
<button (click)="removeItem(i)">Remove</button>
</li>
<li [ngSwitch]="addItem">
<input [(ngModel)]="addItem" placeholder="Add an item" *ngSwitchCase="''" (keyup.enter)="addItemToList()">
<button *ngSwitchCase="'Add Item'" (click)="addItemToList()">Add Item</button>
</li>
</ul>
`
})
export class AppComponent {
items = ['Item 1', 'Item 2'];
addItem = '';
constructor(private renderer: Renderer2) {}
addItemToList() {
this.items.push(this.addItem);
this.addItem = '';
}
removeItem(index: number) {
this.items.splice(index, 1);
}
}In this example, we've created a To-Do List that dynamically updates based on user input. We've used Renderer2 to create the Remove button, and Angular's built-in directives (*ngFor, [(ngModel)], [ngSwitch]) to bind data and handle user interactions.
That's it for this comprehensive guide on Angular's ElementRef and Renderer2! With this knowledge, you're now equipped to manipulate DOM elements, create dynamic behavior, and build powerful Angular applications. Happy coding! š” š