I am new to Angular, especially when it comes to handling events.
Recently, I have been developing a project where the parent Component named Layout consists of multiple child components responsible for performing CRUD operations using different services.
The Layout component includes a navigation bar that displays the number of items in my inventory for each category.
Goal : Whenever an Add or Delete operation is performed in any of the child components, the parent component should trigger a request to the backend to update the item count from the database.
Issue : I am unsure about the correct approach for this. I understand that I need to listen to events from each child component, but I am not sure how to do it.
Should I be listening to the components directly or subscribing to each service and waiting for events to be emitted?
What would be the most efficient way to achieve this?
Due to the length of my code, I will provide relevant fragments to clarify my implementation:
Layout.component.ts
ngOnInit(): void {
this.prepareNavbar()
}
Layout.component.html
<nav>
<!-- Here I display the numbers of each item retrieved from the database -->
</nav>
<router-outlet></router-outlet>
AddItem1.component.ts
addItem(){
this.Categorie1Service.addItem.subscribe()
}
DeleteItem.component.ts
DeleteItem(){
this.Categorie2Service.DeletItem.subscribe()
}