如何在 Angular 10 中使用自定义指令设置元素占位符的样式？

如何解决如何在 Angular 10 中使用自定义指令设置元素占位符的样式？

我有一个使用 Element Ref 和 Renderer 2 来设置元素样式的指令。我想知道如何使用渲染器或此指令中的任何其他方式设置占位符的样式。

代码

TextSizeDirective.ts

import { Directive,ElementRef,Input,OnInit,Renderer2 } from '@angular/core';

import { Service } from '../service';

@Directive({
selector: '[textType]'
})

export class TextSizeDirective implements OnInit {

      @input() textType: string;

      constructor(private el: ElementRef,private s:Service,private renderer: Renderer2) {}

      ngOnInit() {

      this.s.getText().subscribe(data => {

      if (data === 'max' && this.textType === 'title') {

        this.renderer.setStyle(this.el.nativeElement,'font-size','25px');

         //How to style placeholder of this element like above?

      }else if (data === 'max' && this.textType === 'text') {

        this.renderer.setStyle(this.el.nativeElement,'16px');
         //How to style placeholder of this element like above?
      } 
    });
  }
}

AppComponent.html

<div>
<h1 [textType]="'title'">heading</h1>
<p [textType]="'text'">Paragraph</p>
<input [textType]="'text'" type="text" placeholder="Placeholder"/>
</div>