angularplaceholderng2-smart-table

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


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

Solution

  • 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