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

Encountering syntax errors with CommonJS Rollup plugin when attempting to import third-party libraries, particularly those involving the 'process' module

Incorporating DefinitelyTyped files into an Angular 2 project: A step-by-step guide

Sending a parameter between files in a React application: a step-by-step guide

Error: TypeScript cannot find @types declaration for restify-client

What external libraries does Angular 4 utilize during execution, aside from RxJS?

Applying the `lean` method to Mongoose queries that retrieve arrays in TypeScript

Angular2 routing does not trigger the Component constructor and Router life-cycle hooks when the router.parent.navigate method is called from a child component

Tips for eliminating nested switchMaps with early returns

What is the best way to emphasize specific months and years in an Angular Material datepicker?

Type verification not functioning properly in a standalone TypeScript function

What is the procedure for implementing a RoleGuard in Angular 6?

What steps do I need to take in order to develop a custom component for FormControls?

Differentiating Between Observables and Callbacks

Ways to retrieve and bind data using onMounted in VueJS

What is the best method for saving information from a service to a class or interface in Angular 2?

The attribute 'xxx' is not found within the 'Readonly<{}>' type

React and Typescript Multimap Approach

The functionality of @Output and custom events appears to be malfunctioning

How might the issue of update activation affecting lazy loading in an Angular PWA app specifically manifest itself?

What steps should I take to resolve the ChunkLoadError related to signalr?