title: How to style placeholder of an element using custom directive in Angular 10?
body: <p>I have a directive that uses Element Ref and Renderer 2 to style the element. I wanted to know how can I style placeholder using renderer or any other way in this directive.</p>
  <p>Code</p>
  <p><strong>TextSizeDirective.ts</strong></p>
  <pre><code>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 =&gt; {
  
        if (data === 'max' &amp;&amp; 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' &amp;&amp; this.textType === 'text') {
  
          this.renderer.setStyle(this.el.nativeElement, 'font-size', '16px');
           //How to style placeholder of this element like above?
        } 
      });
    }
  }
  </code></pre>
  <p><strong>AppComponent.html</strong></p>
  <pre><code>&lt;div&gt;
  &lt;h1 [textType]=&quot;'title'&quot;&gt;Heading&lt;/h1&gt;
  &lt;p [textType]=&quot;'text'&quot;&gt;Paragraph&lt;/p&gt;
  &lt;input [textType]=&quot;'text'&quot; type=&quot;text&quot; placeholder=&quot;Placeholder&quot;/&gt;
  &lt;/div&gt;
  </code></pre>