Interacting with a Web Socket Connection While Editing Inline Content Causes Distractions. Using Angular 9 Material Table

Not exactly an error-related inquiry, but more about behaviors. In my Angular 9 setup using RxJS and Material, I have a table connected to a web socket for updates triggered by blur or change, depending on the column. This setup works well, updating the table as needed.

I have a specific scenario where I require collaborative editing in the table, hence opting for web sockets. However, collaborative editing presents challenges.

For instance, if User 1 is editing Row 1 and User 2 makes a change in the middle of the edit, it disrupts User 1's focus and updates the table for them.

GIF Link

In the GIF, you can see the Selects closing on both sides due to one update.

Objective

I want users to be able to edit simultaneously without their current selections being disrupted. I have a working example in my application that I've been unable to replicate.

GIF Link

Currently, I use a service to handle the web socket connection across components.

The web socket setup and subscription look like this:

Code Snippet

The web sockets contain data for a week, segmented into separate data sources for each day. When a single day's table is initialized, the component is linked to the subscription for that day from the web socket service. Is there a way to update the rows around the edited row and prevent focus disruption?

Any resources, assistance, or discussion would be highly appreciated!

Thank you for reading!

angulartypescriptwebsocketrxjsangular-material

Answer №1

This problem has been successfully resolved.

By utilizing the trackBy API, I was able to find an effective solution. I stumbled upon this feature unexpectedly on a different stack overflow page. It almost feels like discovering magic, yet it functions precisely as needed.

<table mat-table *ngIf="currentFilterView === 'all'" [dataSource]="webSocketDataSource"
       [trackBy]="trackById"
       multiTemplateDataRows>
       


trackById(index, item) {
  console.log(item._id);
  return item._id;
}

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

Exploring the nuances of checking lists in TypeScript

In the following list: empList = ['one','two','finish','one','three'] I am required to evaluate conditions based on empList: Condition 1: If 'two' appears before 'finish', set this ...

angulartypescript

ways to eliminate attributes using mapped types in TypeScript

Check out this code snippet: class A { x = 0; y = 0; visible = false; render() { } } type RemoveProperties<T> = { readonly [P in keyof T]: T[P] extends Function ? T[P] : never//; }; var a = new A() as RemoveProperties< ...

typescripttypescript-typingsmapped-types

Angular module with customizable configurations

I am interested in developing a customizable Angular 9 module with IVY and AOT enabled. In the latest version of Angular, IVY and AOT are automatically activated: npx @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8 ...

angulartypescriptdependency-injectionmodule

Custom attributes given to Stencil web components in Vite/Vue3 will not trigger any reactions

Short backstory I initially set up my project with a vue-cli environment using Vue 2 and options-api. Recently, I decided to transition to create-vue, which is based on Vite with Vue 3 and Typescript. To incorporate web components from Stencil into my pro ...

typescriptvue.jsweb-componentvitestenciljs

Encounter the warning message "EBADENGINE does not support engine @angulardevkit" while attempting to install class-validator and class-transformer with NestJS

Currently, I am going through the NestJS website course and I encountered an issue while trying to install class-validator and class-transformer using npm i class-validator class-transformer Upon running the command, I received the following error: npm WA ...

node.jsangularubuntunpmnestjs

Guide to aligning a fraction in the center of a percentage on a Materal Design progress bar

Greetings! My objective is to create a material progress bar with the fraction displayed at the top of the percentage. https://i.sstatic.net/GbphJ.png Currently, I have managed to show the fraction at the beginning of the percentage. Below is the code sn ...

htmlcssangulartypescriptangular-material

Obtain the precise X and Y coordinates of a <li> element regardless of where the mouse is clicked using Typescript

I'm stuck and could really use some assistance! Hey there, I have a simple question but I seem to be missing a crucial element. Here's my fiddle where I can detect the clicked item but that's as far as I've gotten: http://jsfiddle.ne ...

htmlcsstypescriptangular5event-delegation

A complete guide to incorporating Angular to hide a Bootstrap 4 Modal using jQuery

After adding jQuery and Bootstrap to the package, I encountered an issue where the modal function was not working properly. Typescript & HTML import $ from 'jquery'; export class AppComponent { name = 'Angular ...

jqueryangular

How to verify user authorization in Angular and PHP

After setting up authentication with Angular and PHP, I noticed that when the page is reloaded, users are required to re-enter their login credentials. This happens because upon reloading, Angular's "IsLoggedIn" variable gets reset to false. Is there ...

phpangular

Guide to utilizing services in Angular 2

As I've developed a service with numerous variables and functions, my goal is to inject this service into multiple components. Each component should have the ability to update certain variables within the service so that all variables are updated once ...

angulartypescriptservice

Using selectors and mappers in Typescript generics

I am looking to create a versatile selector and mapper method. interface State { user: { name: string; age: number; } } const pickName = (state: State) => state.user.name; const selectAge = (state: State) => state.user.age; ...

typescripttypestypescript-generics

Display JSON information in a tabular format

I am trying to populate a table with data from an API response, but I am facing issues printing the data. Specifically, I need to match the "IdLangage" value with the correct cell in the table and display the corresponding translation. The JSON data format ...

jsonangular

Navigating through an array to extract necessary information within an Angular framework

Below is the JSON data I have: [{ "_id": 1, "Name": "x", "Email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a6dce6c3d6d5cfcac9c888c5c9cb">[email protected]</a> ", "Designation": "Manager", "Projec ...

jsonangularangular6

Typescript encounters ERROR TS1128: Expecting a declaration or statement

Having trouble with a TypeScript error in my game-details.component.ts file that I've been trying to fix for a couple of hours. It's showing up at line 26, column 54 and everything seems correct to me. Interestingly, when I press CTRL + S in my ...

javascriptangulartypescript

Tips for transferring a boolean value to a generic parameter in Java?

Looking to pass a boolean value to the Generic type in order to be utilized within a condition. This is the generic type interface OptionTypeBase { [key: string]: any; } type OptionsType<OptionType extends OptionTypeBase> = ReadonlyArray<Opt ...

javascriptreactjstypescriptgenericstypes

What is the best way to transform this component into a function rather than a class?

import React, { Component } from "react"; class ChatHistory extends Component { render() { const messages = this.props.chatHistory.map((msg, index) => ( <p key={index}>{msg.data}</p> )); return ( <div ...

reactjstypescript

Avoid using unnecessary generic types while updating a TypeScript interface on DefinitelyTyped, especially when using DTSLint

After attempting to utilize a specific library (query-string), I realized that the 'parse' function was returning an any type. To address this, I decided to update the type definitions to include a generic. As a result, I forked the DefinitelyTy ...

typescripttslint

Ensure all fields in an interface are nullable when using TypeScript

Is it possible to create type constraints in TypeScript that ensure all fields in an interface have a type of null? For example, if I want to write a validation function that replaces all false values with null, how can I achieve this? interface y { ...

typescript

Dynamically generating an Angular component and populating it with data

I am currently working with Angular 7/8 and I have some code that adds a new component dynamically. In the parent component, my .ts file includes the following: PARENT COMPONENT Within the .ts file: @ViewChild(InjectDirective) injectComp: InjectDirect ...

angulartypescriptangular7angular8

Modifying the website favicon based on the URL address

I am currently working with a client who wants our web application to reflect their branding through the URL. They have requested that we change the favicon on the page to display their private label logo, as well as changing the title. However, I am strug ...

reactjstypescripttitlefavicon