EVENT BINDING:
The process of passing information from elements in a component to the corresponding component's class is known as event binding (HTML Template to TS). Event binding allows for the manipulation of DOM elements without the need for defining a template reference variable. It is considered the most efficient and straightforward method for manipulating DOM elements. The use of () signifies event binding.
Here is an example snippet:
HTML
<button (click)="changeColour()" [ngStyle]="{'background-color': buttonColor}">BUY NOW</button>
TS
buttonColor : string = 'grey'
changeColour() {
this.buttonColor = 'purple'
}
In Angular, it is also possible to bind an event listener to a specific type of event, such as when the enter key is pressed, mouse clicked, or a combination of keys is pressed.
Below is an example snippet:
HTML
<button (keyup.control.shift.enter)="changeColour()" [ngStyle]="{'background-color': buttonColor}">BUY NOW</button>
When Ctrl+Shift+Enter is pressed, the button's colour changes to purple.
@HostListener and @HostBinding:
This approach is similar to event binding and property binding in Angular.
@HostBinding('value') val; is equivalent to [value]="val"
and
@HostListener('click') click(){ }
corresponds to (click)="click()".
@HostBinding and @HostListener are utilized within a directive, while [] and () are used within the component template.
Below is an example snippet:
HTML
<button class="c_highlight">BUY NOW</button>
TS
(host.directive.ts)
@Directive({
// Selects DOM elements with the c_highlight class
selector: '.c_highlight'
})
export class HostDirective {
@HostBinding('style.backgroundColor') c_color = "red";
@HostListener('click') c_onclick() {
this.c_color = "purple" ;
}
}
Renderer2:
Essentially, Renderer2 serves as a wrapper over the browser's API for DOM Manipulation. This API can be executed on platforms other than the DOM, allowing developers to create their own platform-specific Renderer2 implementation. Various DOM manipulation methods like setStyle(), createElement(), createText(), appendChild(), etc., are available through Renderer2. Developers can even define their own custom methods. This concept resembles the use of template reference variables where references to elements are employed to alter their properties.
Here is an example snippet:
HTML
<button (click) = "onClick()" #abcd>BUY NOW</button>
TS
@ViewChild('abcd')
private abcd: ElementRef;
constructor(private renderer: Renderer2) {
}
onClick() {
this.renderer.setStyle(this.abcd.nativeElement, 'backgroundColor','purple');
}
Learn more - https://angular.io/api/core/Renderer2
Template Reference Variable:
This technique involves assigning an id (reference) to an element, reminiscent of how jQuery assigns ids to elements for event definition using the getElementById() method. Example:
HTML
<button (click)="changeColour()" id="buy-now">BUY NOW</button>
TS
changeColour() {
const b = <HTMLElement>document.querySelector('#buy-now');
b.style.backgroundColour = 'purple'
}
fromEvent() from rxjs:
Similar to adding an event listener to an element, fromEvent() generates an Observable that emits events of a certain type originating from the specified element. Only a reference to the element needs to be declared, and the specific event is linked to this reference. Example:
HTML
<button #abcd>BUY NOW</button>
TS
@ViewChild('abcd')
private abcd: ElementRef;
ngOnInit(){
fromEvent(this.abcd.nativeElement, 'click').subscribe(res => this.abcd.nativeElement.style.backgroundColor = 'purple');
}
SUMMARY:
The choice of method for DOM Manipulation depends on the developer's preference. Each method has its own advantages and drawbacks; for instance, Event Binding may exhibit slower performance when modifying large lists due to the delay caused by the change detection cycle. Methods 1 and 2 are considered the best practices in Angular as they eliminate the need for creating references to elements which could potentially expose the application to security risks like XSS attacks, as indicated by @Chellapan.