Dynamically add new values or create interfaces in Typescript on the fly

I am working with an Angular Material Table and I have created an interface that serves as the dataSource for the table. However, I am facing a challenge because the data coming from the backend is unknown. Is there a way to dynamically add a new value to the interface or even create the interface dynamically?

For instance, transforming this:

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

into this:

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  index: number;
}

or starting with an empty interface like this:

export interface PeriodicElement {}

and end up with:

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  index: number;
}

Answer №1

  1. It’s recommended to use it in the following manner:
export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  [key: string]: string | number;
}

or simply

export interface PeriodicElement {
  [key: string]: string | number;
}
  1. Alternatively, you can create separate models and utilize the union(|) operator.

  2. Furthermore, you have the option to employ Partials for this purpose.

  3. To construct interfaces dynamically, please visit this link

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

Conceal the Angular alert message automatically after a specified number of seconds or when the page

I recently started working with Angular and managed to implement an alert message for password reset requests in our app: Usermodel: .service('userModel', ['$q', '$http', 'authorizedTracker', function($q, $http, au ...

Reload entire page for AJAX request if JavaScript is not enabled

Currently utilizing JSF2. I have a button that triggers an action and then updates a section of the page (fairly standard). <h:commandButton value="foo" action="#{myBean.myAction}" > <f:ajax execute="@form" render="#content" /> ...

Facing an infinite loop issue with my ng-view and the index.html page in AngularJS

Hello everyone, I have a question regarding AngularJS ngview. I just started learning about Angular a week ago. In my code, the webpage is showing an infinite loop of the index itself instead of displaying the correct page. I've searched on Stack Ove ...

Oops! It seems like there was an error that occurred because the document was not

I have created a simple app to assist diabetics in calculating various factors to help regulate their blood sugar levels. However, I am facing an issue when trying to pull the Carbs down to my list at the bottom of the page. The code snippet is provided be ...

Angular 7's StyleUrl that Adapts to Your Needs

Is there a better way to dynamically load styles in Angular 7? I have tried the example below but it's not working in version 7 of Angular. This code worked fine in earlier versions before Angular 7. Can someone offer some help or advice please? Thank ...

Issue with vue-apollo package causing GraphQL query not to display on the frontend

Currently, I am expanding my knowledge of GraphQL and working on a project where I aim to display queries in the front end. To achieve this, I have incorporated the package GitHub - Akryum/vue-apollo: ...

Compiling Vue.js without the need for a build tool

Vue.js is the framework I've chosen for my PHP + JS application, and I'm using the full build of Vue by directly including it via a script tag without any build tool. I'm now wondering how I can pre-compile my templates without relying on b ...

If an error 401 occurs, Angular 4 will redirect to the landing page

I am facing an issue with my Angular 4 app which has two modules: guest and user. When a user is not logged in and tries to navigate to .../user, it logs an error in the console. However, I am unable to locate the file responsible for handling this navigat ...

JavaScript and HTTP referrer dynamics

On my website, I have a dropdown menu that allows users to easily navigate to different sections. I am trying to retrieve the HTTP_REFERER variable on the homepage to see if the user came from a sub-section or an external site. The dropdown menu uses this ...

Learning to access $refs values in Vue.js

In my Vuejs (3) project that uses Typescript, I am working on avoiding the use of the type any with $refs: const el = (this.$refs['target'] as any).$el This results in a warning message: warning Unexpected any. Specify a different type @typesc ...

Customizing the toolbar in MUI Datatable

Is there a way to customize the MUI-Datatable by moving the block within the red square into the toolbar and filling up the empty space? I could use some help with this task. ...

Role-based routing in Angular helps direct users to specific sections

Is there a way to set up role-based routing in Angular? I haven't attempted anything yet because I'm unsure of where to begin. I have two components - LandingPageComponent and AdminPageComponent. Along with a basic routing module: import { NgM ...

"Obtaining data from a JSON response: A step-by-step

After receiving a JSON result, which contains only one array as shown below: { id: "5", client: "8", } id: 5 client: 8 I am trying to access it using the following function: getClient(url: string){ this.clientService.client(this.clientUrl).subsc ...

JavaScript - Function is not recognized even though it has been defined, following the completion of a jQuery function

I am encountering an 'Is Undefined' error when running a piece of JavaScript code. https://i.sstatic.net/q3EfY.png < script language = "javascript" type = "text/javascript" > // function added for click on submit - dp0jmr 05/23/20 ...

How can one determine if a DOM element has been generated dynamically?

Some of the content on this page is dynamically created after an ajax request, while other content was pre-loaded when the page refreshed. When I click on an anchor tag, I need to know if it was created dynamically or not. I did manage to solve this issu ...

Your global Angular CLI version (6.1.2) surpasses that of your local version (1.5.0). Which version of Angular CLI should be used locally?

I am experiencing an error where my global Angular CLI version (6.1.2) is higher than my local version (1.5.0). Can someone provide assistance with this issue? Below are the details of my local versions: Angular CLI: 1.5.0 Node: 8.11.3 OS: win32 ia32 Ang ...

Encountering net::ERR_CONTENT_LENGTH_MISMATCH error while using Datatable with AJAX, JSON, and JQUERY

I'm utilizing the Datatables library to create a table that auto-refreshes from a JSON feed. While it is functioning correctly, I am encountering an error message every time the data in the table changes: Failed to load resource: net::ERR_CONTENT_LEN ...

Troubleshooting issue with Angular 2 form values not binding correctly when set and disabled

Here is my code for updating the form if the user's information is available. if (this.user.landmark) this.uploadForm.controls['landmark'].setValue(this.user.landmark || ''); // Uncommenting disable will result in the landmark ...

displaying HTML on the web page only, without appearing in the text input field

update1: I have updated the image to provide better clarity https://i.sstatic.net/hYLsI.png I am currently working on implementing chip filters similar to Google Flights. When selecting "sports," it currently displays "sports1" and replaces "sports" with ...

The hue of the knob is unchangeable once the server data request is made

Upon receiving data from the server request, I am unable to update the color of the knob to match the image provided at this link screencast. Below is my code: JavaScript Code $scope.options = { /* knob option */ }; $http .get(url) .then(functio ...