find and solve || findandsolve.com
Please wait.....

ngx-editor in angular with asp.net core

ngx-editor in angular with asp.net core

In this artical we are going to create an new  angular editor in  web application using ASP.NET Core 2.2 and Angular lates .

We will be creating a sample angular editor in asp.net core.
Prerequisites

⦁  Click here to   Install .NET Core 2.2 or above SDK from 

⦁  Click  Install the latest version of Visual Studio 2017 or 2019 from 

⦁   Click here to Download and install the latest version of Node.js from 

⦁    Angular CLI from  

Step  1

Create Asp.Net Core Project for angular-editor example

First Open Visual Studio 2017 and select File > New > Project.After selecting the project, a new project dialog will open in your computer given below image.Select .NET Core  Web  Application inside Visual C# menu from the left panel given.Then,select ASP.NET Core Web Application from available project types list and then Put the name of the project as "AngularEditor" and press OK.
 

How to add angular-editor in asp.net core application step by step

 

Setp  2

After clicking on OK button,a new dialog will open asking you to select the project template.There are two drop-down menus at the top left of the template window. Select “.NET Core” and “ASP.NET Core 2.2” from these dropdowns and select “Angular” template and press OK Button.
 

How to add angular-editor in asp.net core application step by step

Setp 3

After that  our project will be created. You can see the folder structure in Solution Explorer as shown in the given below image.
 

How to add angular-editor in asp.net core application step by step

 

 

Step  4 

Default Asp.net Angular temple is low version so you can update your angular version or delete ClientApp file form your project and install New Angular template as give below image.

 Right click your project AngularEditor > Open Folder in File Explorer and Click this menu.After that you can see your project path. After that Click on "File" menu from the right top menu , then select “Open Windows PowerShell” from Menu List under File Menu and Press OK.


 Now, Windows PowerShell will be Opened. You can see the Windows PowerShell as shown in the given below image. 

How to add angular-editor in asp.net core application step by step
 

 For more angular version details click here 

Step 5

Now Install New Anuglar template using Windows PowerShell as given below 

ng new ClientApp

Note: 
"ng new" :- This is command line(CL) which is create angular template
"ClientApp" :- This is only folder you can create different  folder name  as you like.
 

Write "ng new ClientApp" on your PowerShell and Enter.Your Anauglar template will be created on your ClientApp folder as give image
 

How to add angular-editor in asp.net core application step by step

 

You can see your project structure as a give below
 

How to add angular-editor in asp.net core application step by step

 For more angular structure details click here 

Step 6

Right click on ClientApp > app > src and select Add > New Folder and name the folder as "editor".

Right click on  "editor" folder and select Add > New Item. An "Add New Item" dialog box will open.Select Scripts from the left panel, then select "TypeScript File" from templates panel, and put the name as editor-component.ts. Press OK. This will add a TypesSript file inside editor folder.You can see layout after add a TypeScript file inside "editor"given below.How to add angular-editor in asp.net core application step by step

Right click "editor" folder and select Add > New Item. An "Add New Item" dialog box will open. 

 

Select Web > Content  from the left panel, then select "HTML Page" from templates panel,and put the name as  editor-component.html  then Press OK. 

This will add a HTML file inside "editor" folder.

How to add angular-editor in asp.net core application step by step

Now our ClientApp/app/ will look like given below:

How to add angular-editor in asp.net core application step by step
 

Step 7

Right click your project ClientApp > Open Folder in File Explorer and Click this menu.After that you can see your project path. After that Click on "File" menu from the right top menu , then select “Open Windows PowerShell” from Menu List under File Menu and Press OK.

Type "npm install @kolkov/angular-editor Windows PawerShell and Enter live given below

How to add angular-editor in asp.net core application step by step
 

Step 8 

After that Open editor-component.ts file and put the following code to it: 


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

@Component({
  templateUrl: './editor-component.html',
})
export class EditorExample {
  details: string;
  wordToHtml: FormGroup;
  public htmlDisplay: string;
  constructor(
    private formBuilder: FormBuilder,

  ) {
    this.wordToHtml = this.formBuilder.group({
      details: '',
      htmlDisplay: ''
    })


  }

  name = 'Angular 8';
  htmlContent = '';

  config: AngularEditorConfig = {
    editable: true,
    spellcheck: true,
    height: '25rem',
    minHeight: '5rem',
    placeholder: 'Enter text here...',
    translate: 'no',
    toolbarPosition: 'top',
    defaultFontName: 'Times New Roman',
    customClasses: [
      {
        name: "quote",
        class: "quote",
      },
      {
        name: 'redText',
        class: 'redText'
      },
      {
        name: "titleText",
        class: "titleText",
        tag: "h1",
      }]
  };

  ngOnInit() {

  }


} 

Again Open editor-component.html file and put the following code to it: 

<div class="form-group row">
  <div class="col-sm-6">
    <label class=" control-label col-md-12"><h4>Content</h4></label>
    <angular-editor [(ngModel)]="details" [config]="config"></angular-editor>
    <div class="html">
    </div>
  </div>
  <div class="col-sm-6">
    <label class=" control-label col-md-12"><h4>Converted Html</h4></label>
    <div class="company-details">
      <textarea rows="21" cols="70" [(ngModel)]="details">
          </textarea>
    </div>
  </div>
</div>

 Step 9

Open app.module.ts ClientApp > scr > app and put this code

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularEditorModule } from '@kolkov/angular-editor';
import { RouterModule } from '@angular/router';
import { EditorExample } from '../editor/editor-component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    AppComponent,
    EditorExample,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularEditorModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot([
      { path: 'editor', component: EditorExample },
    ])
  ],
  providers: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 10

Open app.component.html ClientApp > scr > app and replace all html 

 

<div class="toolbar" role="banner">
  <ul class="navbar-nav flex-grow">
    <li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
      <a class="nav-link text-dark" [routerLink]='["/editor"]'>Editor</a>
    </li>
  </ul>
</div>
<router-outlet></router-outlet>

//and last put this css under 

<style>
 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  li {
    float: left;
  }

    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 16px;
      text-decoration: none;
    }

      li a:hover {
        background-color: #111111;
      }

This css only for header menu display style and color define

[routerLink]='["/editor"]';  //redirect to  our editor page we are already  define "/editor" in app.model.ts file like this 
    RouterModule.forRoot([
      { path: 'editor', component: EditorExample },
    ])
 

Output: 

How to add angular-editor in asp.net core application step by step
  

Sundar  Neupane

Sundar Neupane

I like working on projects with a team that cares about creating beautiful and usable interfaces.

Comments



Report Response