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                
  },
}

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

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 .." },
        }
      }
    };
  }

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',
   },