Refreshing ng2-smart-table to display updated data after adding a new entry

Is there a way to automatically load the table when new data is added to it? The data is successfully added to the database, but the table does not update accordingly.

myHtmlPage.html

<ng2-smart-table [settings]="progressTable_Config" 
                 [source]="progressTableSource"
                 (createConfirm)="addProgressRecord($event)" 
                 (deleteConfirm)="onDeleteConfirm($event)">

myComponentFile.ts

progressTable_Config = {
    add: {
      addButtonContent: '<i class="nb-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmCreate: true,
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
      confirmEdit: false,
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    actions: {
      add: true,
      edit: false,
      delete: false,
    },
    columns: {
      progress_date: {
        title: 'Date',
        type: 'date',
        filter: false
      },
      progress_percent: {
        title: 'Percentage Completed(%)',
        type: 'integer',
        filter: false,
      },
      note: {
        title: 'Note',
        type: 'string',
        filter: false
      },
    },
  };

Answer №1

If you're looking to update the content, try using this code snippet:

this.contentContainer.refresh();

Alternatively, you can use the following sequence of commands:

this.contentContainer.clear();
this.contentContainer.update();
this.contentContainer.load(this.newData);

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

Navigating in Angular is made easy with the Angular routing feature, which allows you to redirect

I have been working through the Angular Tour of Heroes Guide and encountered the section on the "default route". I decided to experiment by removing the pathMatch attribute from the Route associated with an empty string. Below is the code snippet in quest ...

Angular's POST request to Web.API was blocked due to cross-origin restrictions

A demonstration application is being developed at a small scale: Frontend using Angular (http://localhost:4200/) Backend using ASP.Net Core (https://localhost:44333/) Currently, the GET requests from frontend to backend are functioning correctly. Howeve ...

Is C# MVC compatible with Angular?

Is there a way to create a project in Visual Studio 2017 or 2019 from C# MVC with Angular? I've watched tutorials where a template is shown, but it's not appearing for me. Can someone please help? I can't find the template Tutorial I trie ...

Arranging Typescript strings in sequential date format

Looking for guidance on how to sort string dates in chronological order, any expert tips? Let's say we have an array object like: data = [ {id: "1", date: "18.08.2018"} {id: "2", date: "05.01.2014"} {id: "3", date: "01.01.2014"} {id: ...

Navigating to a specific section

Just a heads up: I'm relatively new to Angular, so there's a possibility that my understanding might be off and therefore my question may not make sense. I've recently started working on an application that requires several intricate featur ...

The karma test appears as "passed" in IntelliJ, even though there are remaining errors present, leading to a failure in the CI/CD process

Currently working on an Angular project, my goal is to ensure all tests turn green. Surprisingly, they all passed on my end, but the CI/CD process (Teamcity) failed. Upon checking the log in my IntelliJ IDE, it was revealed that certain tests actually repo ...

What is the best way to integrate Next.js with Strapi (or the other way around)?

My goal is to develop an application utilizing Next.js for the frontend, fetching data from a Strapi API hosted on the same server. The plan is to have Strapi handle API and admin routes, while Next.js manages all other routes. I intend to use fetch in Nex ...

What is the best way to exclude React.js source files from a fresh Nest.js setup?

My setup includes a fresh Nest.js installation and a directory named "client" with a clean create-react-app installation inside. Here is the project structure: ./ ...some Nest.js folders... client <- React.js resides here ...some more Nest.js fo ...

Angular2 experiencing issues loading boot.js file

Whenever I try to launch my project directly from file:///C:/wamp/www/ngProject/index.html or through WAMP at http://localhost/ngproject/, it always gets stuck on the boot.js file. Interestingly, in development mode with npm-start, everything works just f ...

Click on the button to sort Angular data

Greetings! I am a newcomer trying to grasp the concepts of angularjs/typescript. I have compiled an array of fruits, displayed in an unordered list. My goal is to arrange them in descending order and implement a reverse search function to display the item ...

Which interface needs to be extended by props in order to include the "slot" property?

Currently, I am implementing a slot system in React using TypeScript. However, I am encountering an issue where I am unable to locate an interface that includes slot as a property. As a result, my TypeScript checker is generating the following error: Pr ...

Accessing Firestore on Android: com.google.firebase.firestore.FirebaseFirestoreException - PERMISSION_DENIED: Insufficient permissions detected

Initially, I came across various solutions suggesting to eliminate authentication in Firestore rule. However, that is not the approach I wish to take. My Firestore rule currently stands as: rules_version = '2'; service cloud.firestore { match ...

Ensure that the data type of a child object property matches the data type of the corresponding parent key

Can the following structure be enforced with an index signature in TypeScript? { a: { name: 'a' }, // Valid b: { name: 'b' }, // Valid c: { name: 'd' } // Error: Type '"d"' is not assignable to type &apo ...

Angular iframe is not displaying content

My component includes an iframe as shown below: <iframe [innerHTML]="html"></iframe> When I use: <div [innerHTML]="html"></div> it works perfectly. However, it must be contained within an iframe to apply custom styles and script ...

Getting hold of the MatMenuTrigger component instance in an Angular test

Currently, I am facing a challenge in creating a test for an Angular component that contains MatMenu from Angular Material in its template. My goal is to conduct tests on the items within that menu. However, I have discovered that the HTML inside MatMenu g ...

An error occurs when trying to access the 'controls' property within the nested form of an Angular form as it is null

Just getting started with angular and tackling the challenge of creating a nested form. I'm struggling to access controls for certain fields based on the JSON structure provided below, specifically having trouble with the assetsList -> description ...

Issue with the display of Google reCaptcha verification popup within Mat Dialog

While working on an angular material dialog form, I integrated Google reCaptcha. However, when the reCaptcha verification popup appears, it displays above the form as shown in the image. https://i.sstatic.net/ax8QN.jpg I noticed that every time the mat d ...

Implementing Asynchronous Custom Validators in Angular 4

I've encountered the following code snippet: HTML: <div [class]="new_workflow_row_class" id="new_workflow_row"> <div class="col-sm-6"> <label class="checkmark-container" i18n>New Workflow <input type="che ...

Show details when clicked with various elements

I have a dilemma with my Angular version 7 project. In a div, I have placed 6 buttons in 2 columns and I want to show a description of one button only when it is clicked. Currently, the description for all buttons displays at once upon clicking any button. ...

Angular2 tutorial with VS2015 may encounter a call-signature error that is expected

Currently following the Angular2 tutorial in VS2015 and encountering an issue with a warning that is impeding the compilation of one of my TypeScript files. The link to the tutorial is provided below. https://angular.io/docs/ts/latest/tutorial/toh-pt4.htm ...