How To Use CKEditor In Angular

• CKEditor is used to edit HTML documents or their fragments in the browser.this plugin allows you to add class to element.for use CKEditor in angular you have to install following npm in your project.

npm i ng2-ckeditor –save

•  Now add following in app.module.ts file

import {NgModule} from '@angular/core'; 
import {BrowserModule} from '@angular/platform-browser'; 
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import { CKEditorModule } from 'ng2-ckeditor';

 @NgModule({ declarations: [AppComponent],
 imports: [ BrowserAnimationsModule, BrowserModule, CKEditorModule], 
 providers: [], bootstrap: [AppComponent] })

•  In app.component.ts file add following line

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

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

export class AppComponent {
  ckeditorContent: string = '<p>Hello World !</p>';
  }

• In app.component.html file add following line

<ckeditor [(ngModel)]="ckeditorContent"></ckeditor>

• Now our code is ready to run

npm start