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:

  1. npm install --save jodit
  2. Inserted 
    "node_modules/jodit/build/jodit.min.js"
    in angular.json's build-options-scripts
  3. 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.

angulartypescriptjodit

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing a method within a class does not automatically update how it is used in other classes that inherit from it

I am attempting to modify the alpha method in the context of the Cat class, and have the beta method reflect those modifications. const wrapperFn = <T extends (...args: any) => any> (a: T) => { return (...args: Parameters<T>) => ...

typescript

Struggling to retrieve the ID from the API within the Angular and .NET Core component

Currently, I am working on a test project to enhance my knowledge of Angular. However, I have encountered an issue where the student's id fetched from the service is null. To handle the data, I have implemented a StudentController. Below is a snippet ...

c#angulartypescript

Changes to base URL in Angular causing caching of index.html for select users

Let me share with you a story involving a version upgrade issue. Our Angular dashboard is hosted on an "Azure App Service Web App". It communicates with a NodeJS backend, which is also served by another Azure instance. So far, we have deployed two releas ...

angularazuregoogle-chromecaching

Vue defineProps allows for the definition of complex types for properties

Within my code, I am exploring the use of complex prop types in certain instances. Below is an example of what I have in mind: enum Country { [...] } interface IPerson { firstname: string; lastname: string; } interface IAddress { street: string; ...

typescriptvue.jsvuejs3vue-composition-apivue-script-setup

How can I populate separate lists with data from an Angular GET request response?

I am new to using Angular and I have been struggling to build a frontend application that can consume my REST API created with Django. Despite searching for two days, I have not found a satisfactory answer to my problem. Chat GPT also seems to be inaccessi ...

angularangularjs

Using Angular 4 with Firebase to display nested objects within an object

My Firebase data: { "hotel" : { "-Kjgyamcup6ULm0Awa-1" : { "complete" : "true", "images" : { "-Kjgyb6A2gRiDhwaWx-V" : { "name" : "2.jpg", "url" : "https://firebasestorage.googleapi ...

angularfirebase

Unable to Retrieve Information within Angular Components

issue Data Retrieval Issue: Symfony to Angular2 Component. my attempts Angular2 code snippet dashboard.component.ts import { Component, OnInit } from '@angular/core'; import { Hero } from '../hero'; import { HeroService } from ...

jsonmongodbangularsymfony

Looking to organize, refine, and establish a default value with the help of rxjs

In my Angular application, I have an observable that is linked to a reactive forms dropdown control. My goal is to filter, sort, and display the default value. I've created two separate implementations - one for filtering and sorting without displayin ...

angularangular-reactive-forms

Steps for transforming a .Net Core 2.2 / Angular 8 application into a Progressive Web App

I am currently facing challenges in converting a .NET Core 2.2 / Angular 8 app from the Visual Studio Angular SPA Template into a Progressive Web App (PWA). Despite following Angular documentation for creating and testing a basic Angular PWA, I have not be ...

c#angularvisual-studioasp.net-coreprogressive-web-apps

The argument provided is of type 'string | null' which cannot be assigned to a parameter expecting only 'string' type. The value of 'null' is not compatible with the type 'string' in Angular 12

When trying to parse the stored session data using JSON.parse(sessionStorage.getItem('owner')), we may encounter an error stating: Argument of type 'string | null' is not assignable to parameter of type 'string'. This is becau ...

angulartypescriptangular12typescript4.0

Unable to execute @angular/cli following installation

I recently set up the @angular/cli on my MacBook. The Node server version I am using is v6.9.5 and npm version 3.10.10. To install the @angular/cli, I executed the command below: sudo npm install -g @angular-cli However, whenever I try to run any ng co ...

node.jsangularnpmangular-cli

Using a nodejs module is causing an error in my code

I am dealing with a module like this: module Net.Server { var socket:dgram.Socket; [...] } Here is my app.ts file: var server:Net.Server = new Server(); However, when I include this line at the beginning of the first file: import dgram = requ ...

node.jsmoduletypescript

Animating Angular on the table row element

I am currently displaying a table with a list of items that are updated via polling using an http get request to the server. The response is rendered only if there have been changes in the data. My goal is to add animations to the rows of the table and tr ...

angulartypescriptangular-animations

Emulating Data in Angular 2 Using Configuration Similar to Ember Mirage

Is there a way to mock data through configuration in Angular 2 similar to how it's done in Ember Mirage? I'm aware that I can create my own solution using Dependency Injection and MockBackend to intercept HTTP calls and provide dummy data. Howeve ...

javascriptangularjsangular

Is there a way to convert a File into a byte array and then save it in a database using Angular and ASP.Net Core?

Hey everyone, I'm fairly new to working with Angular and I've hit a roadblock when trying to implement file-upload functionality in my Angular application. The technologies I am using include Angular, ASP.Net Core, and Sqlserver. I am tasked wi ...

c#sql-serverangularfile-uploadasp.net-core

What are the guidelines for utilizing square brackets [ ] in directives like @Inputs?

I'm feeling a bit lost. Check out this straightforward directive: @Directive({ selector: '[myDirective]' }) export class MyDirective { private textContent: string; private isEnabled: boolean; @Input() myD ...

angulartypescriptangular2-directives

Customizing the Switch component individually for each item fetched from an API in React Native

I'm struggling with setting the switch button individually for each item in my API. Despite trying multiple solutions, none of them seem to work for me. const results = [ { Id: "IySO9wUrt8", Name: & ...

javascriptreactjstypescriptreact-nativeapi

Verify the completeness of data types within an array in typescript

I am currently developing a comprehensive match function that I want to ensure is exhaustive during compile time. Although adding a default case would help with this, I am intrigued by some interesting dependent typing techniques I have come across. It wou ...

typescripttypescript-genericstypescript-types

Stopping HTTP observable subscriptions in Angular 2 Service

What is the most effective way to unsubscribe from an HTTP subscription within an Angular2 service? I currently handle it this way, but I'm unsure if it's the optimal approach. import { Injectable } from "@angular/core"; import { Http } from "@ ...

angularrxjs5unsubscribe

An issue has occurred: changes.forEach does not function as expected

Encountered an issue while attempting to retrieve data from Firestore using Angular/Ionic. PizzaProvider.ts getAllPizzas() { return this._afs.collection<Pizzas>('pizzas', ref => ref); } pizzas-list.ts pizzas: Observable<any[]& ...

typescriptfirebaseionic-frameworkforeachgoogle-cloud-firestore