Let’s Observe something about Observer APIs.

Observer APIs

This article is the continuation of the below article. If you didn’t read the below article I suggest that to read. Because It will be helpful to understand about Observers APIs.


We already discussed Mutation observers and Intersection observers in the above article. Let’s continue with the next.

Resize Observer:

Resize Observer is used to observing changes to DOM Element’s size. It waits for the changes being made to the target element size.

Let’s Observe something about Observer APIs.

Observer APIs


Observer is an object which monitor or observe something continuously and it notifies after something changed.

Observer APIs:

Observer APIs are very useful to detect changes in the applications. The following are the different types of observer APIs in JavaScript. Each type of observer observes different things.

  1. MutationObserver
  2. IntersectionObserver
  3. ResizeObserver
  4. PerformanceObserver

Mutation Observer:

Mutation Observer observes the DOM tree. It waits for the changes being made to the DOM.

MutationObserver interface will notify us when the particular element’s attributes, text or contents changed. And also it monitors the child nodes whether it has been added or removed.

Often when we are using JavaScript techniques inside Angular, we almost forget about the framework’s features. Let’s utilize them.

Usually, there are two concepts in DOM Manipulations.

  1. Modifying DOM Elements.
  2. Modifying DOM Structure.

Modifying DOM Elements:

We are familiar with a lot of javascript methods that modify the DOM element. Some of them below,

  1. classList.add()
  2. setAttribute()
  3. style.setProperty()

These all are javascript native DOM element methods.

There are multiple ways to modify the DOM elements in angular. We will discuss almost every method and choose the best among them.

Method: 1


  1. Template reference variables.
  2. ElementRef.
  3. @Viewchild/@Viewchildren.
  4. AfterViewInit.


  1. Template reference — Reference to a particular DOM element.

Everyone wants to code faster, cleaner, and keep their code minimal without spending much time on it. In fact, I give more importance to that.

I listed out my favorite points which I frequently use.

  1. Aliases for Import
  2. Optional chaining
  3. Nullish Coalescing
  4. Array Methods(map, filter, reduce)
  5. Interface
  6. Arrow functions, Spread and Rest operators
  7. Object Destructuring

Aliases for Import:

Aliases for the imports are very useful while we are using the same file’s import in multiple files. Let see the example of this.

Photo by Marvin Meyer on Unsplash


Yes. That’s true. Not only for business, nowadays, everyone has a website. It is cheaper. Anyone can afford a simple website. So, we always get some confusion about the web development future, whether you are a student or a web developer.

There are lots of things to learn in web development. If you choose web development as your career option, you should ready to learn daily. You should update your skills regularly. You should adopt with any trending technology.

Web development is improving day…

Manoj Selvam

Web Developer. I write more about Web / Mobile Applications Development. I do applications using MEAN Technology. For More, https://manoj-selvam.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store