angular - Adding a class to a DOM element when clicked

Since Tyler's answer, things have changed a bit. Renderer is depreciated and replaced by Renderer2. In Renderer 2, the class setElementClass is replaced by addClass. And the new function signature for addClass, according to the docs is

addClass(el: any, name: string): void

So the updated menuToggle function should read

menuToggle(event:any) {
    this.renderer.addClass(event.target,"opened");
}

To accomplish what you want, you will need to use the Renderer(injecting it into the constructor with private renderer: Renderer). The Renderer provides an abstraction over native elements and provides a safe way to interact with the DOM.

In your template, you should be able to do something like this:

<div (click)="menuToggle($event)"></div>

This captures the click event and passes it to the menuToggle function.

Then in your component, you should be able to interact with the DOM using the Renderer like this:

menuToggle(event:any) {
    this.renderer.setElementClass(event.target,"opened",true);
}

The function signature for setElementClass, according to the docs is setElementClass(renderElement: any, className: string, isAdd: boolean) : void

For further reading on the Renderer, this is a good article on Medium. In talking about using the ViewChild and accessing the DOM through the nativeElement compared to using the Renderer, it says:

This works fine(using nativeElement from a ViewChild). We are grabbing the input element with the help of the ViewChild decorator and then access the native DOM element and call the focus() method on the input.

The problem with this approach is that when we access the native element directly we are giving up on Angular’s DOM abstraction and miss out on the opportunity to be able to execute also in none-DOM environments such as: native mobile, native desktop, web worker or server side rendering.

Remember that Angular is a platform, and the browser is just one option for where we can render our app.

Hope this helps.