Is it possible to establish a connection between two components that are working with related objects?
One of the components is dedicated to filtering, while the other displays the data results.
By applying filters such as checkboxes, the displayed data results - including response, percentage, and rank - can be modified accordingly.
If you need further clarification or want to modify the code, check out my StackBlitz example below!
If you're looking to achieve your goal, there are a couple of approaches you can take:
(1) One option is to create a sub-component called QuestionsComponent within the Parent Component (FiltersComponent). You can then pass your checkbox data to the sub-component using Input/Output methods.
(2) Another approach is to set up a shared service. Whenever there is a change in FiltersComponent, you would need to emit your data and subscribe to that data in QuestionsComponent.
Appreciate your time,
I am working with a basic array of photo categories that follows this structure: [ { category: 1001, photos: [ { id: 100101, url: 'url.com/100101', favorite: false}, { id: 100102, url: 'url.com/100102', favorite: ...
I recently encountered an issue with one of my React components where the "className" attribute was being converted to "classname" in the resulting HTML, instead of the expected "class" attribute. The component had a custom element definition as follows: ...
I have created a function to loop through an array, call a promise, and update a variable based on the result. The code seems to be functioning correctly, but I am wondering if there is a more optimal way to write it. Any suggestions are appreciated. Tha ...
How can I validate a partial form based on requirements? Built with Angular 7 and Clarity I have a form using the clrForm component that includes: Field 1: Name Field 2: URL Field 3: Date The form also has two buttons: Button 1: Verify Button 2: Su ...
I am experiencing an issue where I can successfully output all fields in the console, but I only want to display one specific field. In this case, I am trying to retrieve the ID field but I am encountering difficulties. Below are screenshots illustrating m ...
I am dealing with various types and their unions. Here is the code snippet: type A = { name: string } type B = { work: boolean } type AB = A[] | B[] const func = (): AB => { return [{ name: 'ww' }] } const data = ...
Currently, I am in the process of implementing HttpInterceptor functionality. However, upon adding it to @NgModule, I encountered the following error message in Chrome: Uncaught Error: Can't resolve all parameters for JwtInterceptor: (?, ?). at s ...
Using bootstrap, I copied a snippet from the bootstrap page and made some modifications to utilize @for because my image is coming from a service. Below is the code I used: <div class="container"> <div class="carousel"> ...
I need help writing two Jest functions that can verify if an object is an instance of a specific type or not. The function expectInstanceOf works perfectly, but unfortunately, the function expectNotInstanceOf is not functioning as expected. export functio ...
I recently developed a chat application using Angular that utilizes the stomp socket from @stomp/ng2-stompjs. To display all messages, I am leveraging *ngFor. <p *ngFor="let item of messages" style="padding: 5px; font-size: 18px"> <span style ...
Apologies if this question has been answered elsewhere, I attempted to search for it but I'm not exactly sure what I should be looking for. Imagine I have this complex object: userRequest: { id: number, subject: string, ... orderIds: ...
I am looking to define an interface with the following structure: interface CheckNActSetup<D, C> { defs: (event: Event) => D, context: (defs: D) => C; exec: (context: C) => any[]; when: ((context: C) => boolean)[]; } and implement it usi ...
I'm currently working with Angular 4 in conjunction with an Asp.net web API. I am facing difficulties in reading the properties of my response. This is how my response appears: https://i.stack.imgur.com/NDJCo.png Here is my post request: postLogi ...
Looking to enhance the design of my Angular application by incorporating Bootstrap table styling with the use of Angular CDK table (without Angular Material2). One challenge I've encountered is that while it's possible to add classes to the CDK ...
I seem to be encountering an issue with dates (shocker!), and I could really use some assistance. Allow me to outline the steps I have been taking. Side note: The "datepipe" mentioned here is actually the DatePipe library from Angular. var date = new Dat ...
Upon clicking the submit button, I encountered the following error: ERROR TypeError: Cannot read property 'minlength' of null I am unsure why this error is happening. How can I go about resolving this issue? Below is the code from app.componen ...
I am looking to alphabetically order a mat-select element in my Angular project. <mat-select [(ngModel)]="item" name="item" (selectionChange)="changeIdentificationOptions($event)"> <mat-option *ngFor="let item of items" [value]="item"> ...
I attempted to retrieve data from an API, but unfortunately encountered the following error: Server Error Error: Issue with serializing .results returned from getServerSideProps in "/". Reason: JSON serialization does not support undefin ...
Encountering an issue while running unit test cases with jasmine-karma in Angular 7. The error received is: ProjectManagementComponent should use the ProjectList from the service TypeError: this.ProjectManagementService.getProject is not a function If I ...
Forgive me if this sounds like a silly question - I am currently working on a small Pokedex application using React and TypeScript. I'm facing an issue where after the initial page load, some items appear out of order after a few refreshes. This make ...