"Introducing a brand new column in ng2-smart-table that is generated from an Object

Can anyone provide guidance on how to create a new column from an Object datatype? I'm struggling with this task. Below are the settings and data for better clarity:

    private settings = {
      columns: {
        firstName: {
          title: 'First name',
          type: 'text'
        },
        lastName: {
          title: 'Last name',
          type: 'text'
        },
        userType: {  
          // The current setup works fine only when there is a string in the API response named - userType
          // But when I try something like - userType.value, I encounter an error 
          title: 'User type',
          type: 'text'
        },
      }

Data from the API:

......
    {
      firstName: 'Jacob',
      lastName: '',
      middleName: '',
      userType: {value: 'superAdmin', display: 'Super Administrator'},
      login: '',
      password: '',
      phoneNumber: '066-233-77-34',
      city: 'Rome',
      address: 'someStreet',
      salary: '0',
    },
......

Answer №1

The column includes a valuePrepareFunction property which allows for the specification of a formatter to manipulate the value before inserting it into a cell. An example of using this is shown below:

{
your_column: {
  title: 'some',
  valuePrepareFunction: (value) => { return value === 1 ? 'true' : 'false' }
}
}

I had the idea to call myCustomFunc within the valuePrepareFunction. With myCustomFunc, I can redefine the value to match my specific requirements.

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

Creating Separate User and Admin Navigation in Angular: Step-by-Step Guide

I am facing an issue in my Angular project where I want to segregate the admin and user navigation similar to that of an e-commerce website. However, the children route is not functioning properly for the dashboard or user sections. Whenever I click on the ...

Tips for utilizing automatic type detection in TypeScript when employing the '==' operator

When using '==' to compare a string and number for equality, const a = '1234'; const b = 1234; // The condition will always return 'false' due to the mismatched types of 'string' and 'number'. const c = a = ...

Connect ngModel value between multiple components

If you have a file named about.component.ts, it would contain the following code: import { Component } from '@angular/core'; @Component({ selector: 'about-section', template: ` <input [(ngModel)]="name" placeholder="First N ...

The parseString method is unable to find the specified member

I have an XML file that needs to be converted to JSON for use in my application. The service returns the XML file like this: constructor(private http: HttpClient) { } loadXml() { return this.http.get('../../assets/1bbc5495-3872-4058-886e-aeee2a1cd ...

"Utilizing a background image within a component to completely cover the entirety

Hey everyone, I need some help with a confusing issue. I'm currently working on an AngularJs project and I am struggling to set a background image for a specific component without affecting the entire application. My goal is to have the image cover t ...

Guide to adjusting column width in an XLSX worksheet using Angular4

I am trying to convert HTML into an XLSX sheet in Angular using SheetJS. However, I am encountering an issue where the width of each column is limited to 256 only, and I need to increase it. I have attempted to use ws[!cols] of ColInfo, but I am strugglin ...

There was an error in the CSS syntax in the production environment due to a missed semicolon

Trying to execute the npm build command "webpack --mode=production --config ./config/webpack.config.prod.js" on our project results in an issue. The issue arises when I include the bootstrap file in my tsx file as shown below. import bs from "../../../../ ...

Is there a way to align the mat card title and subtitle on a single line?

My code is utilizing Angular material and here is the HTML snippet: <mat-card> <mat-card-header *ngFor="let club of result[0]"> <mat-card-title>{{club.clubName}}</mat-card-title> <mat-card-subtitle>Clu ...

Exploring the Applications of @NgModule

The new @NgModule system has me puzzled. In the past, I could easily specify a @Component's directive dependencies using the directives: [] attribute within the @Component meta object. For example: @Component({ /* ... */ }) export class Cmp1 {} @Com ...

Unable to perform real-time transpilation of ES module, a loader plugin must be set up through the SystemJS.config configuration

I encountered an issue while trying to develop a plugable application. Everything was functioning correctly until I introduced "ngx-bootstrap" and "FullCalendarModule"/primeng in the plugin app. Importing any of these modules resulted in the following erro ...

What steps should I take to prevent my <mat-card> from expanding whenever messages are shown in Angular 9?

I have a <mat-card> containing a login form on my page. However, when error messages are displayed, the vertical size of the <mat-card> changes and I need it to remain the same. Is there a way to prevent this from happening? Below, you will ...

What is the reason for deprecating the practice of utilizing data and errors in the subscribe/observable method in Angular?

What is the reason for this code being deprecated? And what is the proper format? fetchPeople() { this.peopleService.fetchPeopleList().subscribe( (data) => { console.log(data); }, (error) => { console.log(error); } ); } ...

Is there a way to omit type arguments in TypeScript when they are not needed?

Here is a function I am currently working with: function progress<T>(data: JsonApiQueryData<T>): number { const { links, meta } = data.getMeta(); if (!links.next) { return 1; } const url = new URL(links.next); return parseInt(url ...

Searching for evenly distributed GPS coordinates across an area

I have a collection of data points representing mountain peaks in the European Alps that I would like to showcase on a map. To prevent cluttering the user interface, I currently retrieve the highest peaks within the visible area of the map by sorting them ...

Issue encountered while iterating over an array using NgFor

I am currently facing an issue while attempting to create a table for viewing certificates in an account using Angular. The error I am encountering is as follows: ERROR Error: Error trying to diff '[object Object]'. Only arrays and iterables are ...

Angular's Dynamic Reactive Forms

I encountered an issue while using Typed Reactive Forms in Angular 14. I have defined a type that connects a model to a strict form group. The problem arises specifically when utilizing the Date or Blob type. Note: I am working with Angular 14. Error: src/ ...

Exploring the world of interfaces in nested mapping functions

Currently, I'm faced with the challenge of mapping an array inside another map with an array. These are the specific interfaces that I am working with: interface Props { columns: Array<{field: string, headerName: string, width: number}>; row ...

Delivering methods and resources using Webpack 5 module federation

In my Angular 11 app, I have successfully integrated the webpack 5 module federation system. This enables the app to load modules remotely on-demand from another build. One aspect that has not been clearly documented is how to handle assets such as styles ...

Phaser3 encountering issues while loading files from Multiatlas

Attempting to utilize the multiatlas functionality in Phaser alongside TexturePacker. Encountering this issue: VM32201:1 GET http://localhost:8080/bg-sd.json 404 (Not Found) Texture.js:250 Texture.frame missing: 1/1.png The JSON file can actually be fou ...

Dynamic React Gallery with Interactive Image Picker

Looking to develop a new photo management application as an alternative to Google Photos, with a focus on displaying and selecting images in a user-friendly way. Currently using the react-grid-gallery library for this purpose. Here is my current implement ...