Showcase pictures within an angular smart table

Question

Showcase pictures within an angular smart table

Is it possible to display images in a column within an ng smart table? We have several columns consisting mostly of data, with one column dedicated to displaying images. Following the ng smart table concept, I attempted to implement the code below which currently only shows a URL instead of the actual image.

https://i.stack.imgur.com/I3K1c.png

home.component.html

<ng2-smart-table [settings]="settings" [source]="notifications"></ng2-smart-table>

home.component.ts

import { myListDB } from "../../../shared/tables/myList";


export class MyBookingsComponent implements OnInit {

  public pageTitle = "My Home Page";

  public notifications = [];

  constructor() {
    this.notifications = myListDB.data;
}

  public settings = {
      editable:false,
      actions: {
          position: 'right',
          add: false,
          edit: false,
          delete: false
      },
      columns: {
          no: {
              title: 'No'
          },          
          brandlogo: {
              title: 'Brand Logo',
          },
          brand: {
            title: 'Brand'
          },
          title: {
            title: 'Campaign Name'
          }
      },
  };

  ngOnInit(){

   }

}

myList.ts

export class myListDB {
    static data = [
      {
        no: 1,
        brandlogo: "assets/images/brands/brand1.jpg",
        brand: "ABC Company",
        title: "XYZ Campaign"
      }

]
}

angular typescript angular8

Answer 1

Answer №1

Here is my solution to resolve the issue at hand!

home.component.ts (Insert a 'type: html' in the brandLogo image array within the code)

import { myListDB } from "../../../shared/tables/myList";


export class MyBookingsComponent implements OnInit {

  public pageTitle = "My Home Page";

  public notifications = [];

  constructor() {
    this.notifications = myListDB.data;
}

  public settings = {
      editable:false,
      actions: {
          position: 'right',
          add: false,
          edit: false,
          delete: false
      },
      columns: {
          no: {
              title: 'No'
          },          
          brandlogo: {
              title: 'Brand Logo',
              type: 'html'
          },
          brand: {
            title: 'Brand'
          },
          title: {
            title: 'Campaign Name'
          }
      },
  };

  ngOnInit(){

   }

}

myList.ts (Include an img tag with the specified src as written in HTML)

export class myListDB {
    static data = [
      {
        no: 1,
        brandlogo: "<img src='assets/images/brands/brand1.jpg' class='imageClass'>",
        brand: "ABC Company",
        title: "XYZ Campaign"
      }

]
}

The desired outcome should resemble the following:

https://i.stack.imgur.com/dyjX5.png

Answer 2

Here is my solution to resolve the issue at hand!

home.component.ts (Insert a 'type: html' in the brandLogo image array within the code)

import { myListDB } from "../../../shared/tables/myList";


export class MyBookingsComponent implements OnInit {

  public pageTitle = "My Home Page";

  public notifications = [];

  constructor() {
    this.notifications = myListDB.data;
}

  public settings = {
      editable:false,
      actions: {
          position: 'right',
          add: false,
          edit: false,
          delete: false
      },
      columns: {
          no: {
              title: 'No'
          },          
          brandlogo: {
              title: 'Brand Logo',
              type: 'html'
          },
          brand: {
            title: 'Brand'
          },
          title: {
            title: 'Campaign Name'
          }
      },
  };

  ngOnInit(){

   }

}

myList.ts (Include an img tag with the specified src as written in HTML)

export class myListDB {
    static data = [
      {
        no: 1,
        brandlogo: "<img src='assets/images/brands/brand1.jpg' class='imageClass'>",
        brand: "ABC Company",
        title: "XYZ Campaign"
      }

]
}

The desired outcome should resemble the following:

https://i.stack.imgur.com/dyjX5.png

Answer 3

Answer №2

To implement a custom component, follow these steps:

Create the custom component by:

Creating a New Custom Component (image-thumbnail.column.ts)

import { Component, Input, OnInit } from '@angular/core';
@Component({
 selector: 'image-thumbnail-column',
 template: `
   <div>
     <img [src]="value" />
   </div>
`,
})
export class ImageThumbnailColumn implements OnInit {
  @Input() value: string;
  @Input() rowData: any;
  ngOnInit(): void {
    console.log(this.value);
    console.log(this.rowData);
}
}

Add type:"custom" to the image column (column property) as the second step.
As the third step, assign renderersComponent: ImageThumbnailComponent to the image column in the smart table configuration. This step is crucial because when setting the type of the column to custom, the smart table relies on this property to communicate data to the component.

Updating the Home Component (home.component.ts)

import { myListDB } from "../../../shared/tables/myList";
import  { ImageThumbnailColumn } from "./image-thumbnail.column.ts";

export class MyBookingsComponent implements OnInit {

  public pageTitle = "My Home Page";
  
  // Other properties and methods
  
}

// Smart table settings with custom component usage

Ensure that your custom component receives two objects: value and rawData. Inside the component, define @Input() value: InterfaceOfValueForColumn; and @Input() rawData: InterfaceOfEachRawData;
Finally, include the custom component in the entry components of the module being utilized. For instance, if the smart table is used in home.module.ts:

@NgModule({
  ...
  entryComponents: [ImageThumbnailColumn],
  ...
})
export class HomePageModule {
}

In this scenario, the 'value' is a string containing the URL displayed in the attached picture. You can then showcase these images creatively according to your preferences.

Answer 4

To implement a custom component, follow these steps:

Create the custom component by:

Creating a New Custom Component (image-thumbnail.column.ts)

import { Component, Input, OnInit } from '@angular/core';
@Component({
 selector: 'image-thumbnail-column',
 template: `
   <div>
     <img [src]="value" />
   </div>
`,
})
export class ImageThumbnailColumn implements OnInit {
  @Input() value: string;
  @Input() rowData: any;
  ngOnInit(): void {
    console.log(this.value);
    console.log(this.rowData);
}
}

Add type:"custom" to the image column (column property) as the second step.
As the third step, assign renderersComponent: ImageThumbnailComponent to the image column in the smart table configuration. This step is crucial because when setting the type of the column to custom, the smart table relies on this property to communicate data to the component.

Updating the Home Component (home.component.ts)

import { myListDB } from "../../../shared/tables/myList";
import  { ImageThumbnailColumn } from "./image-thumbnail.column.ts";

export class MyBookingsComponent implements OnInit {

  public pageTitle = "My Home Page";
  
  // Other properties and methods
  
}

// Smart table settings with custom component usage

Ensure that your custom component receives two objects: value and rawData. Inside the component, define @Input() value: InterfaceOfValueForColumn; and @Input() rawData: InterfaceOfEachRawData;
Finally, include the custom component in the entry components of the module being utilized. For instance, if the smart table is used in home.module.ts:

@NgModule({
  ...
  entryComponents: [ImageThumbnailColumn],
  ...
})
export class HomePageModule {
}

In this scenario, the 'value' is a string containing the URL displayed in the attached picture. You can then showcase these images creatively according to your preferences.

Showcase pictures within an angular smart table

Answer №1

Answer №2

Creating a New Custom Component (image-thumbnail.column.ts)

Updating the Home Component (home.component.ts)

Similar questions

Exploring the power of NestJS integration with Mongoose and GridFS

Leverage the compiler API to perform type inference

What is the best way to transform this JSON data into an array of key-value pairs in JavaScript?

Handling Promises in Angular 1 App using Typescript ES6/2015

I'm having trouble opening a new Angular project even though both my Node.js and npm are up to date. Can anyone help me

Delay in Angular routing

How to disable the onChange event in PrimeNG p-dropdown?

`Inconsistencies in console.log output with Angular Firestore``

Troubleshooting Node Server Startup Problems in AngularJS 2

How can I encode and decode a base64 string using AngularJS1 and TypeScript?

Collaborate and reuse Typescript code across various Node projects

The Problem of Unspecified Return Type in Vue 3 Functions Using Typescript

What is the best way to initiate a refetch when the need arises to follow a different path?

"Enhance your user experience with an Angular material list featuring the ability

How to modify the appearance of the md-tab-header component in Angular2

What are the steps to integrate <br> in a JavaScript code?

Using TypeScript with React and Material-UI: Issue with undefined theme in createStyles()

Learn how to merge two objects and return the resulting object using TypeScript functions within the Palantir platform

Obtaining Data from a Database Using Angular

Issue: ng test encountered a StaticInjectorError related to FormBuilder