CODEWITHSUNDEEP
angulartypescript
user11786942
user11786942

Reputation:

Angular timer alternatives or is it the best approach

I am using Angular 8 at the moment for a project and I have a component with a checkbox that will decide if the footer is visible or not.

Because the footer is a separate component to the settings component I currently need to have the footer on a setTimeout checking the a local variable every 5 seconds.

setTimeout(function(){ checklocalStorage() }, 5000);

When it's only 1 timer is ok but when I add more of them it just seems a not clean way to do this?

Is there any other way to do this and have the component update itself without having to have a timer looping all the time to check if anything has changed in the localstorage variable or is this the recommended approach?

Upvotes: 0

Views: 2212

Answers (1)

cmprogram
cmprogram

Reputation: 1884

Component communication is a core part of Angular - and how you go about it is largely up to you and/or your team. In this instance, setTimeout is not appropriate; not only because it will only be called once (setInterval calls at repeating intervals), but also because it's just not efficient.

That means if you checked your checkbox, you have a chance of still waiting almost 5 seconds to get feedback of what you did in the result of an exposed or closed footer.

Instead, consider the four main ways in which components can bind data between them:

Services:

You can construct a service which handles communication between components. Services are injectable, meaning you can inject them into multiple components, and they can be loaded at the root level of the application.

Simply create a Service and Provide it into your module where you need it.

Then - create an Observable in your service and Subscribe to that observable in your components that need access to your information.

Read up more on Observables at : https://angular.io/guide/observables

In the above link, there is also an example called Delayed Sequence that may suit your purposes.

NgRx:

Using Redux (NgRx) is seen as an advanced method of implementing communication between components, but it is an immutable and reliable source of managing data and data retrieval.

For your scenario, if you're not using it, don't implement it on this solution alone - however to accomplish it, you would simply dispatch an action when your footer is to be shown or hidden, and then you can subscribe to that data in the store elsewhere.

Read up more about the store, here: https://ngrx.io/guide/store

@Inputs and @Outputs:

If the components are nested, you can handle data between them using Inputs and Outputs. So say for instance you had a "page" component. Well in theory your footer would be inside that, an presumably so would your checkbox be. So your checkbox could databind a value "up" to the page component. Which could then bind it "down" to the footer component.

This can get messy however, and should be used only if you're sure the data isn't also manipulated elsewhere.

Read more about Inputs and Outputs and general component communication, here: https://angular.io/guide/component-interaction

Event Bus:

Technically you could use an event bus do dispatch a notification to your application to say "display this footer now" - although this may be not be the best approach.

Event Bus uses are typically more for notifications purposes, or when you don't need to know which component has called for the action to happen.

Essentially an Event Bus is just there to listen for events or circumstances, not track down where or how it came about.

Read up more about Event Emmiters in Angular, here: https://angular.io/api/core/EventEmitter

Upvotes: 1

Related Questions