Angular PrimeNG Form Editor Component

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see how to use the Form Editor Component in Angular PrimeNG.

The Form Editor is a Quill-based rich text editor component. There are various components provided by Angular PrimeNG, which are described below.

Angular PrimeNG Form Editor Component:

• Default Component: It is the most basic form of the Quill-based Form editor where we get the default toolbar options. 
• Custom Toolbar Component: We can customize the toolbar options of a Quill-based Form editor according to the requirements. 
• Model-Driven Forms Component: Quill-based form editors can also be used as model-driven forms.
• Toolbar Component: A standard toolbar with basic settings is provided by the editor; to personalize it, define your items inside the header element.
• Properties: This component helps to include various properties available to enhance the overall the user-interface.
• Events: This component helps to add the different functionalities to the Form Editor, provided by Angular PrimeNG. 
• Methods: This component helps to return the quill instance that is underlying it.
• Styling: This component helps to add various styling to the Form Editor so that the user experience can be enhanced. 

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save
npm install quill --save

Project Structure: It will look like the following:

• Steps to run the application: To run the above file run the below command:

ng serve --save

Example 1: Below is the example that illustrates the use of the Angular PrimeNG Form Editor Component.

• app.component.html:

HTML

<h2 style="color: green;">
  GeeksforGeeks
</h2>
<h5>
  Angular PrimeNG Form Editor Component
</h5>
<p-editor [style]="{ height: '120px' }"></p-editor>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent { }

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { EditorModule } from 'primeng/editor';
import { AppComponent } from './app.component';
import { InputMaskModule } from 'primeng/inputmask';

@NgModule({
    imports: [
        EditorModule,
        BrowserModule,
        BrowserAnimationsModule,
        InputMaskModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Example 2: Below is another example that illustrates the use of the Angular PrimeNG Form Editor Component.

• app.component.html:

HTML

<h2 style="color: green">
  GeeksforGeeks
</h2>
<h5>
  Angular PrimeNG Form Editor Component
</h5>

<p-editor [style]="{ height: '150px' }">
    <ng-template pTemplate="header">
        <span class="ql-formats">
            <button type="button"
                    class="ql-bold"
                    aria-label="Bold">
            </button>

            <button type="button"
                    class="ql-italic"
                    aria-label="Italic">
            </button>

            <button type="button"
                    class="ql-underline"
                    aria-label="Underline">
            </button>

            <button type="button"
                    class="ql-strike"
                    aria-label="strike">
            </button>

            <button type="button"
                    class="ql-blockquote"
                    aria-label="blockquote">
            </button>

            <button type="button"
                    class="ql-code-block"
                    aria-label="code-block">
            </button>
        </span>
    </ng-template>
</p-editor>

• app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
})

export class AppComponent { }

• app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { EditorModule } from 'primeng/editor';
import { AppComponent } from './app.component';
import { InputMaskModule } from 'primeng/inputmask';

@NgModule({
    imports: [
        EditorModule,
        BrowserModule,
        BrowserAnimationsModule,
        InputMaskModule,
        FormsModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

Output:

Reference: https://primefaces.org/primeng/editor