Angular is a front-end framework developed by Google for creating dynamic, modern web applications. One of the significant aspects that provide flexibility and power to Angular is the interaction with HTML DOM (Document Object Model). An important part of this engagement includes dynamically adding or removing classes to HTML elements. In Angular, the NativeElement comes into play to execute this functionality. The NativeElement is a wrapper around the native browser API that allows manipulation of HTML elements. In this article, we will delve into the application of the NativeElement in dynamically adding a class to an HTML element.
Adding a Class with NativeElement
The solution to dynamically adding a class to an HTML element in Angular requires a combination of Angular’s ElementRef service and the nativeElement property. The ElementRef service helps to access the properties of the HTML element and the nativeElement property enables the manipulation of these properties.
export class MyClassComponent implements AfterViewInit{
@ViewChild('mydiv') mydiv: ElementRef;
ngAfterViewInit(){
this.mydiv.nativeElement.classList.add('my-class');
}
}
In this code snippet, we start by importing the ViewChild decorator and ElementRef from Angular core. ViewChild allows access to a child component and the variables within it. We then declare a variable ‘mydiv’ that will hold a reference to the HTML elements. In the ngAfterViewInit lifecycle hook, we add the desired class(‘my-class’) to the HTML element.
Understanding the Code
Breaking down the code, the first part is the import statement. We import ElementRef and ViewChild from the @angular/core module. ElementRef wraps around a native element inside of a View. We’ll use it to manipulate the DOM. ViewChild is a decorator that we use to configure how a component interacts with its child components.
Next, we declare a public variable ‘mydiv’ with the type ElementRef. We use ViewChild to link the variable with the template reference variable in the template. The @ViewChild decorator allows to access the elements in the HTML template.
In the ngAfterViewInit lifecycle hook, we reference ‘mydiv’, this refers to the DOM element. We use nativeElement property to access the properties and methods of the underlying HTML element. We then call classList.add() method to add a class to the element.
Other Useful DOM Manipulation Functions
Apart from adding a class to an HTML element, the nativeElement interface and ElementRef service also allow other manipulations like removing a class, changing inline styles, setting attribute values, listening for and triggering events. Like:
- classList.remove(‘class-name’) – To remove a class
- style.setProperty(‘width’, ‘200px’) – To set inline styles
- setAttribute(‘type’, ‘text’) – To set an attribute’s value
- removeAttribute(‘type’) – To remove an attribute
- addEventListener(‘click’, function{}) – To attach an event listener
- dispatchEvent(new Event(‘custom’)) – To trigger an event
Remember, as powerful as ElementRef is, use it judiciously as manipulating the DOM directly like this often considered as a bad practice. Prefer using Angular’s renderer class for greater security and to make your application compatible with multiple platforms.
Whether using ElementRef for accessing native elements/properties or using Angular built-in directives, always keep the approach aligns with your project requisites and ensures the application security.
