How to bind in angular a style property of a placeholder input like text-indent of a placeholder

Question

I know that I can do this:

::-ms-input-placeholder,  /* Microsoft Edge */
:-ms-input-placeholder,   /* Internet Explorer 10-11 */
::placeholder  /* Chrome, Firefox, Opera, Safari 10.1+ */
{
  text-indent: 10px;
}

but I want to do this with the biding property [style...]

<input type="text" [style.placeholder.text-indent.px]="customIndent">

I honestly don't think that's possible. You'd have to target it using CSS. — Jake, Apr 04 '19 at 11:16
Possible duplicate of [Change style of pseudo elements in angular2](https://stackoverflow.com/questions/35280118/change-style-of-pseudo-elements-in-angular2) — Harun Yilmaz, Apr 04 '19 at 11:24

score 0 · Answer 1 · answered Apr 04 '19 at 11:22

0

I'm not sure I understand your problem but :

You can try this


    number = 10;

    getStyle() {
         style = {
           'text-indent:' : this.number + 'px'
          } 
         return style;     
    }

and use like :

<input type="text" [ngStyle]="getStyle()">

answered Apr 04 '19 at 11:22

Sébastien Carré

28
4

This is not any different from `[style.text-indent]="customIndent"` The OP's asking for styling pseudo classes. – Harun Yilmaz Apr 04 '19 at 11:30

How to bind in angular a style property of a placeholder input like text-indent of a placeholder

1 Answers1