Customize placeholder style in Angular Rich text editor component

18 Nov 20181 minute to read

By using e-rte-placeholder class, you can customize the placeholder style.

app.component.ts

import { RichTextEditorModule } from '@syncfusion/ej2-angular-richtexteditor'
import { Component } from '@angular/core';
import { ToolbarService, LinkService, ImageService, PasteCleanupService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor';

@Component({
  imports: [
    RichTextEditorModule
  ],
  standalone: true,
  selector: 'app-root',
  template: `<ejs-richtexteditor id='defaultRTE' #sample [placeholder]='placeholder'></ejs-richtexteditor>`,
  providers: [ToolbarService, LinkService, ImageService, PasteCleanupService, HtmlEditorService]
})

export class AppComponent {
  public placeholder: String = 'Type Something';
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));