Leveraging ngOnChanges to determine the display of an overlay based on input alterations

Working with TS/Angular on a web application, I made the decision to refactor some code that handles displaying different overlays. Instead of having separate code for each overlay, I consolidated them into one "master overlay" and created a function within it to determine which settings should be used based on the specific variation needed. This function needs to check if any of the 20 variables that dictate whether an overlay should be shown have changed in order to display the correct overlay. To achieve this, I included all 20 variables as inputs in my component and implemented the function in ngOnChanges. While I am aware that using ngOnChanges can be risky due to running during every change detection cycle, I believe in this scenario I can control when it updates, ensuring it only does so when necessary. Do you think I am wrong for utilizing ngOnChanges in this context?

Despite my team advising against using ngOnChanges, I personally find it suitable for this particular situation.

Answer №1

Using ngOnChanges can be risky because it executes during every angular change detection cycle

This is incorrect, only ngDoCheck runs on each cycle.

ngOnChanges only activates when there is a change in an @Input value. It serves the purpose you need and is safe to use!

Answer №2

My suggestion would be to start by removing all the inputs, as tracking and passing 20 inputs can be quite challenging. Instead, I recommend creating a service (or utilizing state management like ngrx) where you can store all the settings in a model object with 20 properties. Within the child component, initialize a subscription to the service's observable, so that whenever any setting changes, you can trigger change detection (assuming you are using onPush strategy). Check out this link for more information.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to initiate a language shift in the **JavaScript yearly calendar** when the language is modified in an Angular application

1. I have incorporated ngx-translate into my Angular application for translation purposes. 2. I have successfully implemented the ability to switch languages during initialization by specifying options like {language:'ja'} for Japanese within th ...

When attempting to dispatch an action with switchMap, it fails, while map successfully triggers the

I recently started utilizing ngrx and ngrx/effects. In the code snippet below, I encountered an issue where using switchMap with concatLatestFrom and dispatching an action fails, while using map seems to work perfectly fine. Any idea why? When trying to ...

Decorators in Angular 9 do not have the capability to support function expressions

Currently, I am working with Angular 9 and facing an issue while generating dynamic routes values during runtime. I have implemented a ComplexUrlRouter to achieve this functionality and integrated it into my Route configuration. However, I encountered the ...

An issue arose during resolution... Angular Library unable to resolve dependency

As I embark on creating my very first component library, things have been progressing smoothly. Now, I am at the stage where I am testing the library by incorporating it into new projects. The package.json file for my library project is set up as follows ...

I encountered an error while trying to access an Angular 2 CLI hosted on Azure that said, "Permission denied to view this page or directory."

Currently in the process of learning angular 2, I've decided to host an app on Azure using git. Despite having no prior knowledge of git, I am following instructions from this video. This is not my first time hosting a simple app. Upon pushing my app ...

Difficulty recognizing left click on onmouseup and onmousedown events in React with TypeScript

I am experiencing an issue with my code that is meant to update the mousePressed variable accordingly when the mouse button is pressed and released. Surprisingly, it works as expected for right-click and middle-click events but not for left-click. The ev ...

Acquire key for object generated post push operation (using Angular with Firebase)

I'm running into some difficulties grasping the ins and outs of utilizing Firebase. I crafted a function to upload some data into my firebase database. My main concern is obtaining the Key that is generated after I successfully push the data into the ...

Adding a Third-Party JavaScript Plugin to Angular 7

I've been attempting to integrate the read-excel-file JavaScript plugin into my Angular 7 project. Despite following all the methods recommended on various websites, I have yet to succeed. Could anyone provide a better solution? declare var readXlsx ...

Is it possible to begin the vue root instance by using a .vue class component?

Utilizing vue-class-component allows me to incorporate class syntax and TypeScript type checking within my .vue files. I can easily create .vue files and register them as components using this method, with the exception of the root Vue() instance. This ap ...

What is the best way to store an audio Blob in the repository file system?

Currently, I have set up a system to record user audio through the device's microphone and can successfully download it on the same device. However, my goal now is to store this audio in my database by making an API call. How can I efficiently send th ...

Before running any unit tests, I have to address all linting issues as required by ng test

Upon running ng test, the output I receive is as follows: > ng test 24 12 2019 14:20:07.854:WARN [karma]: No captured browser, open http://localhost:9876/ 24 12 2019 14:20:07.860:INFO [karma-server]: Karma v4.4.1 server started at http://0.0.0.0:9876/ ...

Executing multiple http post requests in Angular2 using a for loop

I've encountered an issue while attempting to upload multiple files with individual titles. The problem arises when sending requests to the server, as I'm trying to pass each file and its corresponding title one by one. I have an array called bin ...

Angular's innerHTML dilemma

Within my Angular service, I have implemented three methods as shown below: public loadLiveChat() { let url: string; url = this.appConfig.config.liveAgent.liveAgentScriptUrl; this.dynamicallyLoadScript(url); ...

If the numeral variable is used within an HTML function, a 'numeral is not defined' error may occur

Numeral.js is a key tool for me, utilized in both the viewmodels and occasionally in the HTML of my knockout components. <div data-bind="text: numeral(totalCurrent()).format('$0,0.00')"></div> While using webpack to bundle my HTML a ...

search for a specific value within a nested subfield of an asterisk star field in Firestore

Here is the data I have: { root: { _rEG: { fen: 'value' }, _AS: { fen: 'value' }, _BSSA: { fen: 'value' } } } I would like to query using where('root.*.fen', '==', 'value'). ...

Learn the art of bypassing TypeScript errors using @ts-ignore!

I recently encountered an issue when trying to import a pure JavaScript library into a TypeScript project, resulting in the error message: Could not find a declaration file for module xxx. After some research, I learned that this error can be suppressed u ...

What is the function of the Angular dependency injection mechanism?

I'm trying to grasp the inner workings of Angular/NestJs dependency injection. It's intriguing how the type of parameters gets lost when a Typescript class is constructed. For example: type Dependency1 = {}; type Dependency2 = {}; class X { ...

Angular 13: How to Handle an Empty FormData Object When Uploading Multiple Images

I attempted to upload multiple images using "angular 13", but I'm unable to retrieve the uploaded file in the payload. The formData appears empty in the console. Any suggestions on how to resolve this issue? Here is the HTML code: <form [formGro ...

Are you ready to put Jest to the test by checking the completion event of

The RxJS library's Observer triggers three main events: complete error next If we want to verify the occurrence of the complete event using Jest, how can this be achieved? For instance, we are able to test the next and error events by checking for ...

What distinguishes between the methods of detecting falsy and truthy values?

While working with JavaScript / Typescript, I often find myself needing to verify if a length exists or if a value is true or false. So, the main query arises: are there any differences in performance or behavior when checking like this... const data = [ ...