Angular Use CKEditor Example Tutorial

Are you looking for example of angular ckeditor 4 example. i explained simply step by step install ckeditor in angular. This article will give you simple example of how to install ckeditor in angular 8. you will learn ckeditor in angular example.

Sometime we need to use rich textbox in our application. so when you need to use rich textrea then i will always suggest ckeditor to use. ckeditor provide almost html element that you can user it like list, heading, form element, link, italic, old etc. so if you also want to install ckeditor in your anguar app then i will help you in this article.

Here, we will look step by step example how to use ckeditor in angular 6, angular 7, angular 8 and angular 9 application.

So, let's see very simple step and get it very simple example here:

Step 1: Create New App

You can easily create your angular application using bellow command:

ng new myApp

Step 2: Install Npm Packages

In this step, we will install ckeditor4-angular npm package for use ckeditr rich textarea in angular 8/9. so let's run bellow command:

npm install ckeditor4-angular

Step 3: Import CKEditorModule

Now, here we will import CKEditorModule from ckeditor4-angular and then we add on declarations part. so let's update app.module.ts file as like bellow:

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { CKEditorModule } from 'ckeditor4-angular';
  
@NgModule({
  imports:      [ BrowserModule, FormsModule, CKEditorModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4: Update Ts File

Here, we will update app.component.ts file here, in this file we will set model default values and add onSubmit() function for getting textarea value.

You can update as bellow app.component.ts file.

src/app/app.component.ts

import { Component } from '@angular/core';
import {NgForm} from '@angular/forms';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  
  public model = {
      name: 'Hardik',
      description: '<p>This is a sample form using CKEditor 4.</p>'
    };
  
  onSubmit() {
      console.log( `Form submit, model: ${ JSON.stringify( this.model ) }` );
  }
}

Step 5: Update Layout File

Here, we will update html file as like bellow, so update it as like bellow:

src/app/app.component.html

<form (ngSubmit)="onSubmit()">
    <h1>Angular CKEditor Example - HDTuto.com</h1>
  
    <div>
      <label for="name">Name</label>
      <input [(ngModel)]="model.name" type="text" name="name" id="name">
    </div>
  
    <label for="description">Description</label>
    <ckeditor
      #editor
      [(ngModel)]="model.description"
      id="description"
      name="description"
      type="divarea">
    </ckeditor>
  
    <button type="submit">Submit</button>
</form>

Now you can run angular app:

Run Angular App:

ng serve

when you click on submit button then you will get output as like bellow:

Output:

Form submit, model: {"name":"Hardik","description":"<p>This is a sample form using CKEditor 4.  sss</p>\n"}

I hope it can help you...