How to toggle code block visibility in Angular's ngOnInit() method

I'm currently analyzing different design patterns to optimize the number of REST calls when implementing a 'save while typing feature'. To provide a general overview, in my ngOnInit() function, I have included the following code snippet (with distinctUntilChanged() implementation to avoid excessive REST endpoint calls):

ngOnInit(): void {
      if (this.formIsEditable) {
            this.inputField.valueChanges.subscribe(() => //do REST);
            }
}

The issue I am facing is that formIsEditable is set to true after the component has been initialized, which prevents it from entering the above code block. Is there a method in Angular to trigger an update when this boolean value changes? Essentially, I want to prevent sending a PUT request to the Back End when the boolean is false, and allow it only when the boolean is true.

Answer №1

How about considering this approach:

this.inputField.valueChanges.subscribe(() =>
     if(this.formIsEditable){  //perform REST operation}   
 );}

Remember to always unsubscribe from the observable when done.

Answer №2

To filter values emitted when this.formIsEditable is false, you can make use of the RXJS filter operator. See the example implementation below:

this.inputField.valueChanges
  .pipe(
    filter(_ => this.formIsEditable) 
  )
  .subscribe(() => //perform desired action);

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

Tips for sending an email to an address from a user input field in React.js/Express.js

I am currently developing an email application that allows users to send emails to any recipient of their choice. The challenge I'm facing is that I need a way to send emails to user-specified email addresses without requiring passwords or user.id det ...

Sliding off the canvas - concealed navigation

I have implemented CSS to hide a menu on mobile: #filter-column { position:absolute; left:-400px; } However, I want the menu to slide in from the left when the user clicks a link, and everything else should be hidden. When the layer is closed, th ...

Encountering an issue accessing a property retrieved from a fetch request in TypeScript

I am currently dealing with the property success defined in the API (reCAPTCHA). /** * The structure of response from the veirfy API is * { * "success": true|false, * "challenge_ts": timestamp, // timestamp of the challen ...

Securely store files by encrypting them with Node.js before saving to the disk

At the moment, I am making use of the multer library to store files on the File system. This particular application is built using Node and Express. I currently have a process in place where I save the file on the server first and then encrypt it. After e ...

Dealing with HTML and Escaping Challenges in jQuery Functions

Here is a string I have: var items = "<div class='item'><div class='item-img' style='background-image: url('images.123.jpg')'></div></div>" I am looking to update the inner HTML of a div: $ ...

How to retrieve the time duration in minutes between a start and end time in JavaScript to

I have conducted a thorough search on Stack Overflow and other platforms but could not find an answer to my specific question. While I did come across posts related to this topic, they did not address the issue I am facing. Problem: My challenge involves ...

The value is undefined until a new Resource object is pushed with the item

I've encountered an issue while testing a factory and I can't seem to find anyone else with the same problem. Can someone help me figure out what's causing this strange error? TypeError: 'undefined' is not a function (evaluating & ...

Utilizing an Office App Ajax that includes an authentication header, the application connects to a secure Web API 2 backend with CORS

I am currently in the process of developing a content panel application for Office. As part of this project, I need to authenticate an account against a server. To accomplish this, I have implemented my own AuthorizationFilterAttribute on my web api 2 con ...

The function is not defined after the button is clicked when an if-else statement is added to the

Hello there, I am currently working on a form to submit data to the database using ajax and CodeIgniter. The form seems to work fine for inserting data, but it lacks validation to check whether the fields are empty or not. I am attempting to add an if-else ...

typescript loop with a callback function executed at the conclusion

I am struggling with this code and it's driving me crazy. addUpSpecificDaysOfWeek(daysInMonth: any, callbackFunction: any){ var data = []; var that = this; daysMonth.forEach(function(day){ that.statsService.fetchData(that.userid, d ...

Utilizing MDX Component Properties in NextJS

Currently, I am in the process of developing a layout system for my upcoming app inspired by Adam Wathan's approach and his tailwind website. While I have successfully implemented it for js files, I am facing issues trying to apply the same syntax to ...

How can the PrimeNG Listbox be customized to enable drag and drop re-ordering of items?

Looking for some help here. I have a listbox that I want to make reorderable using drag and drop functionality. I know I need to use the pDraggable and pDroppable directives, but I'm struggling to get it working properly. So far, I can only drag the l ...

Issues with jQuery focus function in Internet Explorer 11

Is there a way to set the focus on an anchor tag using the URL? Anchor Tag: <a id='714895'>&nbsp;</a> URL: jQuery Code: try { if(document.URL.indexOf("?ShowAllComments=True#") >= 0){ var elementClicked = "#" +location.hre ...

What are the appropriate situations for utilizing getStaticPaths()?

Right now, an API call is being made in a main component and the fetched data is saved in a Singleton. This singleton data needs to be accessed by the getStaticPaths() function. However, due to the fact that getStaticPaths() pre-renders it, the singleton ...

Encountering issues with installing packages while creating a new Angular 9 project

Recently I updated to node version 12.16.1 (LTS) and Angular CLI version 9.0.3. After creating a new project with the CLI, all files in the root folder are generated but it gets stuck during the installation of node packages. Has anyone else encountered t ...

Nestjs is throwing an UnhandledPromiseRejectionWarning due to a TypeError saying that the function this.flushLogs is not recognized

Looking to dive into the world of microservices using kafka and nestjs, but encountering an error message like the one below: [Nest] 61226 - 07/18/2021, 12:12:16 PM [NestFactory] Starting Nest application... [Nest] 61226 - 07/18/2021, 12:12:16 PM [ ...

Is it advisable to modify the value of props by using toRef in the Composition API?

I've noticed a common practice in the CompositionAPI where props are converted to refs using `toRefs` function. This has left me feeling a bit confused. For instance, citing the Vue 3 official guide: export default { props: { user: { type ...

Managing repeated calls to a specific get function in nodejs

Utilizing an Ajax call, I am invoking the following GET function every 10 seconds to monitor the status of various URLs. app.get('/getUrl', function(req, res) { var response = {}; var keyArr = []; var urlData ...

React Higher Order Component (HOC) encountered an ESLint issue: spreading props is not

Does eslint lack intelligence? The Higher Order Component (HOC) is quite generic, so I struggle to specify the incoming options/props as they are dynamic based on the component being wrapped by this HOC at any given time. I am encountering an error statin ...

Create a checklist with unique identification, value, and description by utilizing an array of objects

Utilizing React with Typescript, I am tasked with constructing the React component MultiSelectCheckBoxes by supplying an array of Objects of type Color to the constructor: The structure for a checkbox list should be like this: const options = [{ "id": ...