Filter.inputClass on settings

[lucasasantiago]

I am trying to add a class to the filter text using filter.inputClass but this doesn't really work. I already tried to create a new class in the scss, doesn't work.

Component:

settings = {
    selectMode: 'multi',
    actions: false,
    pager : {
        display : false,
        perPage:5
    },
    add: {
      addButtonContent: '<i class="fa fa-plus"></i>',
      createButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    edit: {
      editButtonContent: '<i class="nb-edit"></i>',
      saveButtonContent: '<i class="nb-checkmark"></i>',
      cancelButtonContent: '<i class="nb-close"></i>',
    },
    delete: {
      deleteButtonContent: '<i class="nb-trash"></i>',
      confirmDelete: true,
    },
    filter: {
            inputClass: 'text-red'
     },
    columns: {
       nome: {
          title: 'Nome',
          type: 'string',
          editable: false,
          hide: true
        }
    }
};

.scss:

filter-smart-table {
        font-weight:bold
    }

Any idea if it is possible?

[lucasasantiago]

I am trying to find the problem...

The class="text-red" of input-filter is not reflecting in class="form-control ng-untouched ng-pristine ng-valid" of input.

Page element inspected:

<input-filter _ngcontent-c27="" class="text-red" ng-reflect-ng-class="text-red" ng-reflect-query="" ng-reflect-column="[object Object]">
    <input class="form-control ng-untouched ng-pristine ng-valid" type="text" ng-reflect-klass="form-control" ng-reflect-form="[object Object]" ng-reflect-model="" placeholder="id">
  </input-filter>

[rbcascio]

+1 for me as well. Attaching filter to settings and even column headers does not work either.

[marticrespi]

Is not working yet? I try to insert an inputClass in add and filter but it ignores them.

[Chiu-Kevin-bah]

It works, but the binding isn't passed over to the input but is being passed to input-filter. I looked at the source and it's definitely passing the same input over to the input field. I worked around it but might be annoying if you're trying to avoid bootstrap.

I honestly think it's related to Angular CLI 6 and AOT. Are you guys building in AOT or using CLI 6?

I've seen some funky component related stuff.

[Chiu-Kevin-bah]

OH! It might be related to the input validation state injection. Maybe angular overrides the inputFilter input due to timing. I think [className] is used and that binding executes once