Incorporate a typescript library into your Angular application

Question

Incorporate a typescript library into your Angular application

Recently, I added a text editor called Jodit to my angular application and faced some challenges in integrating it smoothly.
The steps I followed were:

npm install --save jodit
Inserted
```
"node_modules/jodit/build/jodit.min.js"
```
in angular.json's build-options-scripts
Included
```
"node_modules/jodit/build/jodit.min.css"
```
in angular.json's build-options-styles

Below is a snippet of my component:

import * as jodit from 'jodit';

@Component({
  selector: 'app-test',
  styleUrls: ['./test.component.scss'],
  template: `
    <textarea id="test" name="editor"></textarea>
  `
})
export class TestComponent implements OnInit {
  public editor: any;

  constructor() {}

  ngOnInit() {//
    const elem: HTMLElement = document.getElementById('test');
    this.editor = new jodit.Jodit(elem, {});
}

The errors I encountered are showcased below:

src/app/test.component.ts(21,28): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.
src/app/test.component.ts(41,27): error TS2339: Property 'Jodit' does not exist on type 'typeof import("C:/Users/test/Desktop/test/node_modules/jodit/src/types/index")'.

Despite the compilation issues, the text editor functions properly when I use npm start (although the errors persist). Could this be due to a type linkage error? Any insights would be appreciated.

angular typescript jodit

Answer 1

Answer №1

When creating an Angular module, you can now easily incorporate it by following these steps:

"scripts": [
  "../node_modules/jodit/build/jodit.min.js",
],

In your typings.d.ts, include the following declaration:

declare var Jodit: any;

To create a component using the module, use the following template:

import {
  Component,
  OnDestroy,
  AfterViewInit,
  EventEmitter,
  Input,
  Output
} from '@angular/core';

@Component({
  selector: 'simple-jodit',
  template: `<textarea id="{{elementId}}"></textarea>`
})
export class SimpleJoditComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Output() onEditorKeyup = new EventEmitter<any>();

  editor;

  ngAfterViewInit() {
    this.editor = new Jodit('#' + this.elementId, {});
  }

  ngOnDestroy() {
   this.editor.destruct();
  }
}

To implement the component, use the following code:

<simple-jodit
  [elementId]="'my-editor-id'"
  (onEditorKeyup)="keyupHandlerFunction($event)"
  >
</simple-jodit>

Answer 2

When creating an Angular module, you can now easily incorporate it by following these steps:

"scripts": [
  "../node_modules/jodit/build/jodit.min.js",
],

In your typings.d.ts, include the following declaration:

declare var Jodit: any;

To create a component using the module, use the following template:

import {
  Component,
  OnDestroy,
  AfterViewInit,
  EventEmitter,
  Input,
  Output
} from '@angular/core';

@Component({
  selector: 'simple-jodit',
  template: `<textarea id="{{elementId}}"></textarea>`
})
export class SimpleJoditComponent implements AfterViewInit, OnDestroy {
  @Input() elementId: String;
  @Output() onEditorKeyup = new EventEmitter<any>();

  editor;

  ngAfterViewInit() {
    this.editor = new Jodit('#' + this.elementId, {});
  }

  ngOnDestroy() {
   this.editor.destruct();
  }
}

To implement the component, use the following code:

<simple-jodit
  [elementId]="'my-editor-id'"
  (onEditorKeyup)="keyupHandlerFunction($event)"
  >
</simple-jodit>

Answer 3

Answer №2

Don't forget to check out this wrapper as well: Angular Jodi component wrapper

Answer 4

Don't forget to check out this wrapper as well: Angular Jodi component wrapper

Incorporate a typescript library into your Angular application

Answer №1

Answer №2

Similar questions

How to utilize Enzyme to call a React prop in TypeScript

What could be causing the increased build size of my Polymer2 compared to Angular5?

Encountering a premature closure error, specifically the inability to set headers after they have already been sent to the client, when trying to stream video

Definition of Stencil Component Method

Leveraging Angular to incorporate HTML templates from one component into another component

Each time the Angular Service is called, it undergoes a reset process

Ways to deduce or implement intellisense for parameter types in overloaded functions

What is the method for utilizing enum values as options for a variable's available values?

The error message "Unable to access property 'open' of an undefined menu" is being displayed in a TypeScript code

Having trouble locating the Promise name in Visual Studio 2015?

Palantir Forge: Enhancing Column Values with Typescript Functions

Is there a method to restrict the scope of identical components appearing multiple times on a single page in Angular 7?

The status code 0 was returned for the null URL

Using Angular to click and scroll to a component on a web page

Creating intricate mazes using canvas drawing techniques

Guide on Executing a Callback Function Once an Asynchronous For Loop Completes

Steps for personalizing the dataset on a PrimeNG bar graph

Restrict the parameter type using a type predicate

Encountering an XHR error when using a systemjs module in TypeScript

Trigger a dispatched action within an NGRX selector