As we know that UI framework angular or react are totally component based framework. Component is used to divide pages into different small pieces and used to manage code in easy and highly flexible manner. Have you ever think about types of components. So there are two types of angular component.
- Dumb Components
- Smart Components
lets discussi each in details-
- Dumb Components : A Component that performs nothing on its own and is completely reliant on Smarter Components. Dumb Components just exist to present something in the DOM. As a result, they are sometimes known as “Presentational Components” or “Isolated Components.” Dumb components are completely reusable since they have a defined API and are independent of any business logic. Also easy to test as they are completely isolated.
Lets create the dumb component by using ng g component component_name
Lets add below code dumb.component.ts file.
Here we are getting the value of addition from parent component. In this component we are only displaying the value of addition variable. Actual logic is not in this component.Thats why it is called as dumb component.
Dumb component receives data through @Input and communicates only with it’s direct parent through @Output.
- Smart Components: Smart components are application-level components. They pass data down to dumb components as much as possible and mostly only contains business logic to fetch data. They compose several other dumb components in its template. And listen for events emitted by dumb components and perform the required action. Smart components know how to fetch data and persist changes.
In short smart component would be those who understand how to manage data, how to retrieve data from services, how to interface with services, maintain track of the state, and are concerned with how the app operates as a whole. They are also called containers because they use property bindings to transfer data to Dumb Components.
Lets create smart component by using ng g component component_name
lets add below code in smart.component.ts file.
As you can see in the above code, logic for addition the two numbers are written inside this smart component. So its use for writing all the business logic. Its just the simple example inside this component you can do the complex operations as well.
Lets add below code in smart.component.html file.
In above code we have passed the addition variable to the child component through property binding.
Conclusion: So this is all about the smart and dumb component. If you want to know more about the component then you can refer Angular component.
