How Components Interact in Angular

Angular components have multiple ways to share information with other parts of the application. Developing a complex Angular app will involve a lot of data, and subsequently a lot of interaction between components.

Once you learn the methods that are used to handle data in components, it becomes easy to replicate for different use cases.

However, there are three main ways to intercept data changes and it’s easy to assume that all methods are equal. In simple circumstances, such as when you just need to listen to the updated value, they can act pretty similar.

But there are circumstances where each method has superiority over the other in terms of their suitability to the task at hand.

The methods used are:

• @Input Setter and Getters
• NgOnChanges
• A Service

As the title suggests, we’ll be focusing on the **first two, **where we will go over their individual suitability for different circumstances in Angular.

Dumb components in Angular

If you haven’t heard of a Dumb Component in Angular… you might think I’m insulting Angular or its components. I’m not…

The idea of a Dumb component in Angular is to create** components that act like pure functions**. Meaning, their internal state, and behavior are controlled by their inputs and outputs only. There are no side effects and external data sources like services, APIs, or local storage.

Dumb components are usually minimalistic UI/presentational containers for our applications, where size and complexity are considered, and reduced as much as possible.

#typescript #javascript #programming #angular #software-engineering