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

Question

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.

Code

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, 'font-size', '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>

Answer 1

you can create a css class in the CSS file where you want to append a::placeholder property and reference it in your directive with

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

constructor(private el: ElementRef, private renderer: Renderer2) {
}
ngOnInit() {
   // for my usecase i prefere this
   this.el.nativeElement.classList.add("yourCssClass")
   // or 
   this.renderer.setElementClass(this.elementRef, 'class');
}