How to update placeholder text in ng2-smart-table?

Question

I'm using ng2-smart-table for display data in angular 6 app. I have enable filter feature. Now I want to set default search as a text in all columns placeholder. I have searched a lot. But I'm not able to change placeholder of filter.

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

In .ts file.

add: {
  confirmCreate: false
},
columns: {
   id: {
    title: 'ID',
    filter: true        
  },
  name: {
    title: 'First Name',
    filter: true                
  },
}

Ptyalism

Can you share your code? – Kimberliekimberlin

@Kimberliekimberlin I have update my question. Please check it. – Ptyalism

I am not sure I get you. I took a look here. Only input that has placeholder is the search input. Do you want to change Search input placeholder to something else? – Kimberliekimberlin

Yes , I have already looked into that. It is just put one textbox static. But I need filter in all columns. – Ptyalism

As per ng2-smart-table implementation, there is not way to configure the placeholder for the filters. Filter placeholder is declared as placeholder="{{ column.title }}". If you really need to implement then I am scared that you need to overlay it. – Clypeate

@SunilSingh Thanks for comment. :) – Ptyalism

Answer 1

to change the place holder of ng2 smart table

Step 1: goto--> node_modules\ng2-smart-table\lib\data-set\column.js

add below lines in you var column ,

this.placeholder = '';

it will look like

var Column = (function () {
    function Column(id, settings, dataSet) {
        this.id = id;
        this.settings = settings;
        this.dataSet = dataSet;
        this.title = '';
        this.placeholder = '';
        this.type = '';
        this.class = '';
        this.isSortable = false;
        this.isEditable = true;
        this.isFilterable = false;
        this.sortDirection = '';
        this.defaultSortDirection = '';
        this.editor = { type: '', config: {}, component: null };
        this.filter = { type: '', config: {} };
        this.renderComponent = null;
        this.process();
    }

Step 2: on same file --> Add this.placeholder = this.settings['placeholder']; in Column.prototype.process = function () {},

it will look like this

 Column.prototype.process = function () {
        this.title = this.settings['title'];
        this.placeholder = this.settings['placeholder'];
        this.class = this.settings['class'];
        this.type = this.prepareType();
        this.editor = this.settings['editor'];
        this.filter = this.settings['filter'];
        this.renderComponent = this.settings['renderComponent'];
        this.isFilterable = typeof this.settings['filter'] === 'undefined' ? true : !!this.settings['filter'];
        this.defaultSortDirection = ['asc', 'desc']
            .indexOf(this.settings['sortDirection']) !== -1 ? this.settings['sortDirection'] : '';
        this.isSortable = typeof this.settings['sort'] === 'undefined' ? true : !!this.settings['sort'];
        this.isEditable = typeof this.settings['editable'] === 'undefined' ? true : !!this.settings['editable'];
        this.sortDirection = this.prepareSortDirection();
        this.compareFunction = this.settings['compareFunction'];
        this.valuePrepareFunction = this.settings['valuePrepareFunction'];
        this.filterFunction = this.settings['filterFunction'];
    };

step 3: goto node_modules\ng2-smart-table\components\filter\filter-types\input-filter.component.js and change the below line --> from

   Component({
        selector: 'input-filter',
        template: "\n    <input [(ngModel)]=\"query\"\n           [ngClass]=\"inputClass\"\n           [formControl]=\"inputControl\"\n           class=\"form-control\"\n           type=\"text\"\n           placeholder=\" {{ column.title}}\" />\n  ",
    }),

to:

Component({
            selector: 'input-filter',
            template: "\n    <input [(ngModel)]=\"query\"\n           [ngClass]=\"inputClass\"\n           [formControl]=\"inputControl\"\n           class=\"form-control\"\n           type=\"text\"\n           placeholder=\" {{ column.placeholder }}\" />\n  ",
        }),

step 4: goto your component.ts and add the below line in you column details like below -->

  columns: {
        ExamID: {
          title: this.translate.get("table.ExamID")["value"],
          **placeholder:"your place holder",**
          type: "string"
        },

you are ready to go

Hehre

@ParshantKumar It works for me. Thanks for your answer. – Ptyalism

@ParshantKumar It works in my local fine. But When I make a build for live it doesn't take changes of module. So what should I do to take node module changes in live ? – Ptyalism

it's not a good practice to change the source code of the package inside node_modules because, what happens if you install the project in other machine? your changes will lost because it's not in the real package, is for that I did send a Pull request to the repo... – Rheims

@Ptyalism make sure your npm cache verify first and then build the project. it should work fine. – Hehre

@Ruben i a hve requested to push this change in the node module, as far as they do not include in their node module it should work fine. – Hehre

Answer 2

actually there is a simple way to accomplish this and that is by making your own custom input text component, and provide it with any configurations you need...

that component could something like this:

import { Component, OnChanges, OnInit, SimpleChanges } from "@angular/core";
import { FormControl } from "@angular/forms";
import { DefaultFilter } from "ng2-smart-table";
import { debounceTime, distinctUntilChanged } from "rxjs/operators";

@Component({
  selector: "input-filter",
  template: `
    <input
      [ngClass]="inputClass"
      [formControl]="inputControl"
      class="form-control"
      type="text"
      placeholder="{{ column?.filter?.config?.placeholder || column.title }}"
    />
  `,
})
export class CustomInputTextFilterComponent extends DefaultFilter implements OnInit, OnChanges {
  inputControl = new FormControl();

  constructor() {
    super();
  }

  ngOnInit() {
    if (this.query) {
      this.inputControl.setValue(this.query);
    }
    this.inputControl.valueChanges.pipe(distinctUntilChanged(), debounceTime(this.delay)).subscribe((value: string) => {
      this.query = this.inputControl.value;
      this.setFilter();
    });
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes.query) {
      this.inputControl.setValue(this.query);
    }
  }
}

and you can use it when you initialize the columns like this:

initColumns(): void {
    this.columns = {
      nameEn: {
        title: "nameEn",
        type: "text",
        sort: true,
        filter: {
          type: "custom",
          component: CustomInputTextFilterComponent,
          config: { placeholder: "search here .." },
        }
      }
    };
  }

Leora

Answer 3

I have reviewed the implementation of this library on github and the placeholder gets it from the column.title parameter, so in theory you should to set this attribute on the column object when you declare your columns and the library will use that to set the placeholder.

Then you can not put a placeholder different to the title, except hack JJ

You can take a look at: https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/components/filter/filter-types/input-filter.component.ts#L15

REPO ISSUE TO ADD THE FEATURE: https://github.com/akveo/ng2-smart-table/issues/785

PR SENDED https://github.com/akveo/ng2-smart-table/pull/900

MY FORK WITH THE FEATURE https://github.com/RSginer/ng2-smart-table/tree/rsginer/allow-different-placeholder

How to use:

 settings = {
  columns: {
   id: {
    title: 'ID',
    placeholder: 'Different placeholder',
   },

Orchestra

I have checked this link before. Can you show me it's example? – Ptyalism

Yes, but is pretty similar than your code: stackblitz.com/edit/angular-yngnnb – Rheims

I suggest you that consider to make your own table component if you really need this feature or send an issue to the repo of that library. I can make a pull request to the library if you want.(edited) the issue exist: github.com/akveo/ng2-smart-table/issues/785 – Rheims

I made a pull request right now on the repository.. we only can wait until the owner makes the merge or you can also use my fork, follow the progress on the PR link: github.com/akveo/ng2-smart-table/pull/900 – Rheims

Sorry I was not available. Today I'll implement your ans and I'll update you. :) – Ptyalism

I have tried but it is not works for me. Can you please add any working screen shot ? – Ptyalism

Sure in the fork you have an example, you can clone the repo and checkout the branch rsginer/allow-different-placeholder and run npm run start – Rheims

Hello @RubénSoler , I have add place holder as you show in example , I have add in settings but it didn't work for me. Can you help me to do that. ? – Filch

Yes , I have checked your fork code and make changes based on that in my node_module. I have set this code placeholder="{{ column.placeholder || column.title }}"/> and it is working fine. – Filch

I haven't update code in lib/data-set/column.ts file. Can you please tell me, Is it important to update change as per your fork ? – Filch

Yes, but, the ideal will that the owner of the repo merge my PR... because if you do npm install again the changes inside node_modules will disapear... – Rheims

Another option it's build the module and upload your own build to npmjs.org with another name – Rheims

@RubénSoler I have do some RND on this issue. And I found that I can install your fork as a npm. I have tried but not done by me. Can you help me to install your fork to my node module ? – Filch

Yes, let me find a minute to build it and upload as a new npm package and i'll send you the command to install it ASAP – Rheims