Angular handles most DOM creation, updates, and removals for you. However, you might rarely need to directly interact with a component's DOM.
When to use DOM APIs?
While Angular handles most
rendering concerns, some behaviors may still require using DOM APIs. Some
common use cases include:
1.
Managing
element focus
2.
Measuring
element geometry, such as with getBoundingClientRect
3.
Reading an
element's text content
4.
Setting up
native observers such as
MutationObserver, ResizeObserver, and others as well.
5.
Avoid
inserting, removing, and modifying DOM elements. In particular, never directly
set an element's innerHTML property, which can make your application vulnerable
to cross-site scripting (XSS) exploits.
This is the YouTube video link for
this: - https://youtu.be/Au8gjL2zZPc
Try to following:-
Avoid direct DOM manipulation whenever possible.
Render callbacks never run during server-side rendering or build-time pre-rendering.
Never directly manipulate the DOM inside of other Angular lifecycle hooks.