0

currently i'm develop a search input component. This component is ussed in multiple regions of my application.

Component has '@inputs' for define bgColor and color of input HTML element.

I usse placeholder for help message. For define placholder color and other CSS properties i need ::-webkit-input-placeholder property.

Problem goes here, when i try to define color of placeholder as same color of input (saved in '@input inputColor' property).



    @Component({
      selector: 'app-search-input-component',
      templateUrl: './search-input.component.html',
      styleUrls: ['./search-input.component.less'],
      styles: [
        'input::-webkit-input-placeholder{ color: ' + this.inputColor + ' }' //I try this but is undefined :(
      ],
      host: {
        '[style.display]' : "'flex'"
      }
    })
    export class SearchInputComponent implements OnInit {

      @Input()
      public placeholder: string = "Search model or manufacturer ...";

      @Input()
      public inputColor: string = '#ffffff'; // I need apply to placeholder this color

      @Input()
      public inputBgColor: string = 'rgba(255, 255, 255, 0)';

      @Input()
      public inputPadding: string = '10px';

      @Input()
      public inputBorder: string = '1px solid #ffffff';

A lot of thank's to all for your time! Tarik Curto

Tarik Curto
  • 86
  • 6
  • I think it's impossible :( https://stackoverflow.com/questions/35280118/change-style-of-pseudo-elements-in-angular2/35280715#35280715 – Vega Sep 16 '17 at 13:54
  • 1
    Thank's for your response @Vega. I proceed to open a feature request into Angular profile on github. – Tarik Curto Sep 16 '17 at 15:21
  • Did you try to set the input's color and then set the placeholder color to `inherit !important` ? – cyr_x Sep 16 '17 at 15:25
  • Thank you very much! @cyrix I hadn't thought of a simple fix like that. – Tarik Curto Sep 16 '17 at 15:38

0 Answers0