How to change filter placeholder on ng2 smart table in angular?

As per ng2-smart-table documentation, there is no way to configure the placeholder for the filters. Filter placeholder is declared as

placeholder=”{{ column.title }}”

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 → in Column.prototype.process = function () {},

Add below lines in your var column,

this.placeholder = this.settings[‘placeholder’];

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 your column details like below

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

Note:

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 on another machine? your changes will be lost because it’s not in the real package

Before Build:

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

Please read more about npm cache here