Can´t integrate https://www.npmjs.com/package/@ngstack/code-editor

Ionic Framework
1

Hi,

I want to use Code Editor inside my Ionic Angular App.

For this I have installed this GitHub Repo with NPM. Then I have added the Project to my app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { LoginComponent } from './login/login.component';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { provideHttpClient } from '@angular/common/http';
import { RouteReuseStrategy } from '@angular/router';
import { RegisterComponent } from './register/register.component';
import { environment } from '../environments/environment';
import { AngularFireModule } from '@angular/fire/compat';
import { AngularFireAuthModule } from '@angular/fire/compat/auth';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,  
    AngularFireModule.initializeApp(environment.firebaseConfig), // Firebase initialisieren
    AngularFireAuthModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },provideHttpClient()],
  bootstrap: [AppComponent],
})
export class AppModule {}

After that I have created a component and added this:

<ngs-code-editor [theme]="theme" [codeModel]="model" (valueChanged)="onCodeChanged($event)"></ngs-code-editor>

and the Typescript:

import { Component, OnInit } from '@angular/core';
import { CodeEditorModule, CodeModel } from '@ngstack/code-editor';

@Component({
  selector: 'app-code-editor',
  templateUrl: './code-editor.component.html',
  styleUrls: ['./code-editor.component.scss'],
})
export class CodeEditorComponent  implements OnInit {

  constructor() { }


  theme = 'vs-dark';

  model: CodeModel = {
    language: 'json',
    uri: 'main.json',
    value: '{}'
  };

 

  onCodeChanged(value: any) {
    console.log('CODE', value);
  }

  
  ngOnInit() {}

}

then i get the error:

Error: src/app/code-editor/code-editor.component.html:1:34 - error NG8002: Can't bind to 'codeModel' since it isn't a known property of 'ngs-code-editor'. [ng] 1. If 'ngs-code-editor' is an Angular component and it has 'codeModel' input, then verify that it is part of this module. [ng] 2. If 'ngs-code-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [ng] 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. [ng] 1 <ngs-code-editor [theme]="theme" [codeModel]="model" (valueChanged)="onCodeChanged($event)"></ngs-code-editor> [ng] ~~~~~~~~~~~~~~~~~~~ [ng] src/app/code-editor/code-editor.component.ts:5:16 [ng] 5 templateUrl: './code-editor.component.html', [ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ [ng] Error occurs in the template of component CodeEditorComponent. [ng] [ng] × Failed to compile.v