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