Angular6

Angular Ngx Editor Working Example

Angular Ngx Editor Working Example

Views

Hello to all, welcome to therichpost.com. In this post, I will do, Angular Ngx Editor Working Example.

There are so many WYSIWYG Editor modules for Angular but I like ngx editor npm the most because it is easy to implement and use.

Here is the working picture of ngx-editor – npm in Angular 6:

 

Angular Ngx Editor Working Example

Here is the steps need to follow:

 

1. Very first, we need to run below commands to step up Angular Project:
npm install -g @angular/cli 
ng new angularngxeditor //Create new Angular Project
$ cd angularngxeditor // Go inside the Angular Project Folder
ng serve --open // Run and Open the Angular Project
http://localhost:4200/ // Working Angular Project Url

angular_run_projecy

 

2. Now, run below command to add ngx editor into Angular Application:

Here you can find ngx editor details : https://www.npmjs.com/package/ngx-editor

npm install ngx-editor --save
3. After it, now run below commands to add rest of modules for ngx editor:
npm install --save font-awesome angular-font-awesome
npm install ngx-bootstrap --save
4. Now, add below into your app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NgxEditorModule } from 'ngx-editor';
import { FormsModule } from '@angular/forms';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
import { HttpClientModule }    from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxEditorModule,
    FormsModule,
    HttpClientModule,
    AngularFontAwesomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

5. Now, add below code into app.component.html:
<app-ngx-editor height="100px" minHeight="50px" [placeholder]="'Enter text here...'" [spellcheck]="true" [(ngModel)]="htmlContent"></app-ngx-editor>
6. Now,  add below code into src/styles.css:
@import "~font-awesome/css/font-awesome.css";

Now, this is it, if you have any query related to this post, then please do comment or ask question.

Thank you,

badfella,

TheRichPost

 

 

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

12 Comments

Leave a Reply

Positive SSL