Monitor the input value for any changes in Angular 8 using the listen component

Hey there! I'm currently working with a component that includes the input @Input() userId: number[] = []; to receive a list of user IDs.

Specifically, I have integrated this component into another one, such as the news component:

<kt-user-post-list-select [userId]="noWriterIdList" (selectedUserId)="getSelectionUserList($event)">
</kt-user-post-list-select>

When I make a request to the server to add news, it returns a list of IDs like [1,2,3]. In order to update the kt-user-post-list-select component with these IDs using [userId]="noWriterIdList", I encounter an issue: I want the list changes to be tracked and trigger the following function:

validateUSerIsWriter(ids: number[]): void {
    for (let id = 0; id < ids.length; id++) {
        let user = this.users.find(x => x.userId = id);
        if (user != null) {
            user.isDeleted = true;
        }
    }
}

Unfortunately, this functionality does not seem to be working as expected.

Any suggestions on how to tackle this problem?

Answer №1

There are two methods available:

  1. You can incorporate the ngOnChanges hook within the kt-user-post-list-select component to listen for new Ids and trigger the function validateUserIsWriter. It is worth noting that this approach may impact performance.

  2. Alternatively, you can utilize a Subject to subscribe to newIds and run the function validateUserIsWriter. This method does not require the use of the @Input decorator. For a straightforward example, please visit https://stackblitz.com/edit/angular-subject-observable

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

Exclude all .js files from subdirectories in SVN

In my typescript project, I am looking to exclude all generated JavaScript files in a specific folder from SVN. Is there a convenient command or method to achieve this for all files within the directory? ...

Adding a dynamic key-value pair object to an array using the JS push method

In my programming challenge, I am dealing with an array of objects that have dynamic keys and values. The structure is a bit complicated, but here's a simplified version: let products_row = [ { id: 1, category_id: 11, options: { &a ...

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

Running the following node.js code: var http = require('http'); http.createServer(function(req,res){ res.writeHead(200,{'Content-Type': 'text/plain'}); res.write("Hello"); res.end(); }).listen(8888); Upon starting the server ...

I am facing difficulties in installing the necessary node modules for my Angular project

After attempting to run npm install, an error message is displayed towards the end: error syscall unlink 22396 error The operation was rejected by your operating system. 22396 error It's possible that the file was already in use (by a text editor or ...

What is the best way to create a fixed footer in Next.js using React?

I'm looking to create a fixed footer that will stay at the bottom of the page if there isn't enough content to fill it. I've been researching ways to achieve this using CSS, but many of the methods don't easily translate to React/Next.j ...

Troubles encountered while trying to make MediaRecorder function in Angular 9

Recently, I've been working on integrating Media Recorder into my Angular 9 application by following the instructions provided at this link. However, I have encountered some issues along the way. When I access the page with the Media Recorder compone ...

What is the best way to access the current value and name of a textbox in real-time using

How can I retrieve the value of a textbox in JavaScript using onblur and on keyup events, while also performing real-time checking for each individual textbox using "this keyword"? Here is my JSFiddle link. Can you assist me in modifying it? ...

The file upload process did not return a successful response for Ajax

Recently delved into the world of Ajax and encountered a perplexing issue. Here is the dilemma: I successfully upload a .csv file to the server. However, after the upload "success" in the ajax call fails to trigger a response. Neither does complete or er ...

Applying a class change in Vue.js upon mounting

How can I make a button element with a .hover property trigger the hover animation as soon as the page loads? I want to apply a class to the button when the page is mounted and then remove it later. What is the best approach for this? I considered using a ...

Typescript i18next does not meet the requirement of 'string | TemplateStringsArray NextJS'

While attempting to type an array of objects for translation with i18next, I encountered the following error message in the variable navItems when declaring i18next to iterate through the array Type 'NavItemProps[]' does not satisfy the constrain ...

Setting a consistent theme or style for all HTML/React tags using a selector inside a specific component

Here's a simplified example of what I'm trying to do: I'm using Material UI Styles for styling my components. I want to style all the <Link> tags in my component. For instance: const useStyles = makeStyles(theme => ({ menuLink: ...

Any ideas on troubleshooting the NG0100: ExpressionChangedAfterItHasBeenCheckedError issue and resolving it?

I have encountered NG0100: ExpressionChangedAfterItHasBeenCheckedError in Angular, and it seems to persist despite my efforts in my scenario. Essentially, within the interceptor, I have a service that loads a boolean value representing "status": interce ...

Having difficulty retrieving a JSON Object value through an angular2 pipe

I am currently working on creating a dynamic table using Angular2. I have set up an Angular2 component with two pipes: the first pipe successfully retrieves the key from the JSON object, which is used as the column for the table. However, the second pipe, ...

jQuery fails to fetch information

I am currently working with a straightforward script as shown below: $(function() { var url = theme_directory + '/func/api.php'; $.get( url, function(data) { alert("Data Loaded: " + data); }); }); Here is the code for api ...

Having trouble loading extensive amounts of data into a select element within an Angular application

Upon successfully retrieving around 14000 data entries from an HTTP request, I am facing difficulties loading this vast amount of data into my Select Tag. This is causing the entire page to slow down. The structure of the select Tag in question is as follo ...

Is it possible to reduce the number of calls to ngAfterContentChecked() and ngAfterViewChecked() instead of calling them repeatedly?

`ngAfterContentChecked() { console.log("Content has been checked"); } ngAfterViewChecked(){ console.log("View has been checked"); }` I am currently developing an Angular project where I need to execute a set of statements twice on a page - ...

@Viewchild doesn't have access to matSort

In my Angular project, I am having trouble getting my @ViewChild instance to work with MatSort in HTML. component.ts file: import { MatSort } from '@angular/material'; export class MyComponent { @ViewChild(MatSort) sort: MatSort; } ngOn ...

Obtain the URL for the JavaScript code that is currently running

Can anyone help me find the URL of the JavaScript currently being executed? I am aware of using window.location.href for the current page, but that doesn't necessarily provide the path to the script that is running. Any assistance would be greatly ap ...

When I try to send data from my Node.js application to my MySQL database, the information does not

I am currently working on developing a registration and login page, where the user details are stored in a database for authentication during login. The registration button is meant to store user data in the database to complete the sign-up process. For t ...

Is the key to achieving optimal client interactions within a client layout, while still maintaining its role as a server component, truly possible?

My current challenge involves managing modals opening and closing with server components instead of client components. In the past, I used to lift the state up to my Layout for client components: export default function Layout({ children }) { const [showP ...