Reified Reactive programming in Angular – A Guide to Building Interactive Websites
When we visit a website, we expect it to be fast, responsive and easy to use.
It's a way for developers to make sure that the website is reacting to what users doing in real-time. This means that the website is always up to date with the latest information and reacts quickly to user's actions.
One of the most powerful tools for achieving this is Reactive programming.
Reactive programming in Angular
Angular reactive programming is a way of managing and handling data and events in a way that makes the code more efficient and predictable.
Angular does that with its in-built feature of "propagation of changes" to each event done by a user. Various features make Angular more reactive.
In this blog, let’s learn how @Input, @Output, and event emitters do that.
What is @Input()?
A property declared and annotated with the @Input() decorator in a child component denotes that it can receive some value from its parent component. It behaves the same within a directive. It’s useful to pass data from a parent component to a child component whenever there is a change detected in the data.
What is @Output()?
@Output() Decorator annotates a property, indicating that it can pass some value from a child component or directive to its parent component. It is used to trigger an event and notify the parent component about a data change that happened.
What is Event Emitter?
An event emitter can be called a listener, which emits custom events synchronously or asynchronously by listening to a change. It should be used along with the @Output decorator.
Data enters a component via property binding and exits via event binding.
Why do we use @Input, @Output, and Event emitter?
These decorators are used to pass data between parent and child components.
-
The @Input decorator defines the input property in the component, which the parent can set.
-
The @Output decorator defines the output property (event), which is raised in the child component by the Event Emitter.
Let’s see how we can use @Input, @Output, and Event Emitter in an application
@input(), @output() & Eventemitter
The property annotated with @Input() decorator, is considered an input property.
This means it’s ready to get data from its parent component. For binding the value of that property to a property in the parent component, the method of “property binding” is used.
Example
Consider the following component class
In the above code, the Employee property is annotated with @Input() decorator. The component expects that some value will be received from its parent component.
Through property binding syntax, the parent component sends the employee object to the input property.
It can be done by adding a square bracket to the employee property. Now, “selectedEmployee”, which is a property of its parent component is assigned to it using the template expression.
@output()
The property annotated with the @Output() decorator is declared as the output property. It’s initialized as an Event Emitter.
An event is raised, and some data is passed as an argument to that event by the child component. That event is noticed, and the data is read by the parent component using the method called “Event binding”.
The employeeChange is declared as an Output property, in the type EventEmitter.
Using the “Event binding” syntax, we need to subscribe to the event from the parent component.
The event name (employeeChange) should be wrapped with parentheses (). By assigning, a template statement (employeeUpdated($event)), it can get some data through the argument $event.
Note: Don’t forget that the argument name must be $event.
EventEmitter
EventEmitter is responsible for raising the event. The @output property normally is of type EventEmitter.
The child component will use the emit() method to emit an event along with the data.
Angular Reactive programming Example
Let's see an example app below:
Create an app namely “reactiveProgramExample” by using the below command
ng new reactiveProgramExample
And create two components namely, “employeeList” and “employeeData” using the below commands
ng g c employeeList
ng g c employeeData
Create a Class file namely, “employee” using the below command
ng g class employee
Child Component
employeeData.html :
In the employeeData.html we are binding the employee data to the input element using two-way binding. We have a button namely “Update Employee”.
employeeData.ts:
In the employeeData.ts file, we handled the click event of the button through the update() function and emitted the employee data to its parent component, if there is any update happened.
employee :
Parent Component
employeeList.html:
In the employeeList.html file, we are listing down the employee data we have and letting them edit the details, by clicking the “Edit” button.
By adding the selector of EmployeeDataComponent, EmployeeListComponent acts as the parent component of it.
employeeList.ts :
When there is a data update, that will be passed to the child component’s property namely, “selectedEmployee” which is an input property declared in the child component.
app.component.html :
Let’s call the employee list in the app.component.html using the selector of it.
app.module :
Created components should be declared in the declarations array in the app.module.ts file
Conclusion
I hope you understand the concept of data transfer between the components using a simple technique in the above guide.
There is a lot more in Angular to discuss on reactive programming. Let’s discuss that in the upcoming blogs.
If you're looking to implement this approach in your next project, our team of experienced Angular developers would be happy to help.
We have a team of experts who are well-versed in the Angular Reactive programming, and can provide you with a high-quality, custom-built solution that meets your specific needs and requirements.
So, if you want to take your website to the next level, feel free to reach out to us.
Recommended Articles:
Skills to Look for While Hiring Angular Developers
Anitha
Full Stack Developer
