I managed to accomplish this by utilizing the following approach:
Utilize a variable for the property in your css/scss file and use ElementRef to dynamically set the property declared in the css/scss file.
input {
display: block;
font-size: 16px;
font-style: normal;
font-weight: 400;
color: #333333;
--placeHolder-color: #959595;
}
input::placeholder {
color: var(--placeHolder-color);
}
input::-webkit-input-placeholder { /* Edge */
color: var(--placeHolder-color);
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: var(--placeHolder-color);
}
input:-moz-placeholder {
color: var(--placeHolder-color);
}
input::-moz-placeholder {
color: var(--placeHolder-color);
}
import { Directive, ElementRef, Host, Renderer2 } from '@angular/core';
import { CardNumberComponent } from 'src/app/themes/card-number/card-number.component';
@Directive({
selector: '[appInputStyle]'
})
export class InputStyleDirective {
private input: HTMLInputElement;
constructor(private el: ElementRef, private renderer: Renderer2) {
this.input = this.el.nativeElement;
}
ngOnInit() {
this.input.style.setProperty('--placeHolder-color', 'tomato');
}
}
<input type="text" appInputStyle>