Create Html editor in Angular 7

0
443
Angular

This example shows how to use Html editor in Angular 7.

Example of Html editor in Angular

  1. First you need to install angular-editor by following command in terminal after entering to the project directory.
npm install @kolkov/angular-editor --save

2. Open component.html file where you want to use the Html editor.

<angular-editor formControlName="email_body" placeholder="Enter text here..." id="email_body"  [config]="editorConfig" ></angular-editor>

3. Open component.ts file and paste the following code.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators} from '@angular/forms';
import { AngularEditorConfig } from '@kolkov/angular-editor';


export class ChEmailAddComponent implements OnInit {
  public form:FormGroup;
 htmlContent = '';
  editorConfig: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '20rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no'
  }
constructor(public fb: FormBuilder, public router:Router){
this.form = this.fb.group({
  'email_body':[]    
});

get_html_content()
{
this.htmlcontent=this.form.value.email_body;
}

}
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here