Is there a method to restrict the scope of identical components appearing multiple times on a single page in Angular 7?

I have a scenario where I need to place multiple instances of the same component on a page, but when one of them receives input and refreshes, all other components also refresh. Is there a way to prevent this from happening?

<tr *ngFor="let map of imgs | keyvalue; index as i;">
    <td><app-preview [file]="map.value"></app-preview></td>
</tr>

Component:

<img *ngIf="src" [src]="src" alt="">

Each component should be receiving different map values, but currently, any change in one map value triggers a refresh in all components, which is not ideal.

angulartypescriptcomponentshook

Answer №1

When faced with this situation, it is recommended to utilize the trackedBy function.

To implement this in your code, make the following adjustments:

In your HTML file,

<tr *ngFor="let map of imgs | keyvalue; index as i; trackBy: trackByFn">
    <td><app-preview [file]="map.value"></app-preview></td>
</tr>

And in your TypeScript file,

public trackByFn(index, item) {
    if(!item) return null;
    return index;
}

By doing this, you will prevent the entire list from being re-rendered in the DOM whenever there are updates. The default tracking method relies on object references, but switching to tracking by index ensures that only necessary changes are made to the DOM, thus improving performance.

For more details, refer to this article

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

Show a few values as a string in Angular using Typescript

I am working with JSON data and I want to know how to display hobbies without including the word "all" in an Angular/TypeScript application. { "Name": "Mustermann1", "Vorname": "Max1", "maennlich& ...

htmlangulartypescript

Is there a source where I can locate type definitions for Promise objects?

In the process of creating a straightforward class called Primrose, I am extending the global Promise object in order to include additional methods like resolve and reject. export class Primrose<Resolution> extends Promise<Resolution>{ priv ...

typescripttypespromise

Update the nest-cli.json configuration to ensure that non-TypeScript files are included in the dist directory

I've been searching for a solution for hours now: I'm developing an email service using nestJS and nest mailer. Everything was working fine until I tried to include a template in my emails. These templates are hbs files located in src/mail/templ ...

typescriptcompilationhandlebars.jsnestjsmailer

Utilize the UserService in NestJs to enhance security within the RolesGuard functionality

In my application, I have a module called UserModule that exports the UserService. Here is an example of how it is done: @Module({ imports: [ MongooseModule.forFeature([{ name: User.name, schema: UserSchema }]), MongooseModule.forFeature([{ name: ...

node.jstypescriptnestjs

Next.js Troubleshooting: Unexpected Issue with 'use client' Triggering Error in React Client Component

Keeping it simple, here is a useState function that I am using: 'use client' import {useState} from 'react'; const Home = () => { const [fruit, setFruit] = useState('apple'); return ( & ...

reactjstypescriptnext.jsruntime-errorreact-context

The mat-paginator fails to display the page information

Material paginator is not displaying the page information correctly. In the official documentation, it shows the page info as 'Page 1 of 20', but when I run their code locally or on Stackblitz, the output is different. Instead, it shows the num ...

angularangular-materialfrontendpaginator

Exploring Angular's Animation Feature for HTML Element Movement

I'm currently using @angular/animations module to animate HTML objects and I want to move an object when a button is clicked. For example: * The object initially has top: 800px, left: 800px * Clicking the 'W' button should move the obje ...

cssangular

Access a designated webpage with precision by utilizing Routes in Angular

Is it possible to display a different component in Angular routing based on a condition in the Routing file? For example, if mineType is equal to "mino", can I navigate to another component instead of the one declared in the Routing? Should I use Child ro ...

angulartypescriptangular-routing

Attempting to transmit the chosen value, extracted from the selection, into a function, repetitively and multiple times, within an array

I'm attempting to build a dynamic table that allows the user to select the number of rows. Each row contains two dropdown menus with options ranging from 1 to 10. Upon selecting a number from the dropdown, I want it to be passed to a function in the T ...

angular

The state of the checked value remains unaffected when using the Angular Material Checkbox

I am currently working on a list of elements and implementing a filter using pipes. The filter allows for multi-selection, so users can filter the list by more than one value at a time. To ensure that the filter persists even when the window is closed or t ...

javascriptangularangular-material

issues arise with tests following the transition from Angular 9 to Angular 10

Recently, I encountered an issue with my jest-tests after updating Angular from version 9 to 10. These tests were working perfectly fine before the update. Can someone guide me on how to resolve this issue? Below is one of the tests that is causing troubl ...

angulartestingjestjsangular10

In Typescript, we can streamline this code by assigning a default value of `true` to `this.active` if `data.active

I am curious if there is a better way to write the statement mentioned in the title. Could it be improved with this.active = data.active || true? ...

javascripttypescript

Establish a global variable within a TypeScript file

I am currently facing an issue where I need to add an event to the browser inside the CheckSocialMedia function. However, it keeps saying that it could not find the name. So, my question is how do I make the 'browser' variable global in the .ts ...

javascriptangularionic3inappbrowser

Using TypeScript in conjunction with Node.js

I'm currently trying to use typescript with nodejs, but I keep encountering errors. Can anyone help me troubleshoot? Here is the code snippet (assuming all necessary modules are imported): import routes from "./routes/routes"; let app = express(); ap ...

node.jstypescriptexpress

Issues with updating in Firebase real-time database using Angular 2 are not

I am currently working on a simple app that inserts new records into Firebase. Below the input field, the app lists the last 10 items in the database. ISSUE: I am facing a problem where I have to start inputting something in the input field or click on ...

firebaseangular

In what way does Ionic determine the URL for input and send the password-protected email for logging in based on that URL?

I've set up a section for inserting the URL into the login form page using the following code: <ion-item> <ion-label floating>Company URL</ion-label> <ion-input type="url" value="" required></ion-input> </ion-item> ...

angularionic-framework

Setting up Typescript with React 17 and Tailwind CSS version 2.0

I'm struggling to set up TailwindCSS 2.0 with the create-react-app --template typescript configuration and encountering errors. Even after following the instructions on the official TailwindCSS website for React at https://tailwindcss.com/docs/guides/ ...

reactjstypescriptnpmtailwind-css

Error message displaying 'class-transformer returning undefined'

I'm new to working with the class-transformer library. I have a simple Product class and JSON string set up to load a Product object. However, I'm encountering an issue where even though I can see the output indicating that the transformation was ...

typescriptclass-transformer

Tips for extracting individual fields from a payload in Angular 8

How do I extract individual fields from the payload and bind them with HTML on a page? I am trying to retrieve the alphacode and countryname in Angular 8. This is my Component: this.table$ = this.productService.get(id) .map(actions => { c ...

angular

Developing a foundational Repository class in TypeORM

Are you looking to create a custom baseRepository class that extends TypeORM's Repository? import { Repository } from 'typeorm'; export abstract class BaseRepo extends Repository<T> { public getAll ( ...

typescripttypeorm