kostyatretyak/ng-contenteditable

Angular v4+ contenteditable directive for compatibility with Angular forms

Project status

The project moved to Angular v7 mono repo with @ng-stack/contenteditable.

ng-contenteditable's Issues

[FeatureRequest] conditional contenteditable

Hi, thanks for your awesome work. I would suggest a feature-request:

I would like to conditionally make an element editable by providing a boolean variable on which i can decide whether the element should be editable, e.g.:

content-element.html

<p *contenteditable="isEditable" [formControl]="myControl"></p>

export class ContentElementComponent implements OnInit {
	isEditable = false;
	myControl = new FormControl();
	ngOnInit() {
		if (userShouldEdit()) {
			this.isEditable = true;
		}
	}
} 

would that be possible or somehow a bad idea?

thanks in advance

Seriously? Follow up on #3

I can't believe you locked my issue just like that. How can it be unrelated?

test is not saved in IE

I'm using your directive and in IE 11 the text I edit is not saved in the component. (I didn't use any form)
in FF, chrome and Edge everything is OK.
here is the html:
<div #description class="property description" [(ngModel)]="cellDraft.description" contenteditable="true"></div>

License

Hello :)

Would you mind putting up a license for this project's code?

Thanks :)

Please add a @Pipe/@Directive/@Component annotation

Hello i am getting the above error when trying to build my app using angular 4.4.3.
It builds and runs fine in developer mode but fails to build in prod.

I know this has been raised before but if you are sure this isn't a problem with your package can you provide an example cli project that builds in prod mode?

propValueAccesor is misspelled

"Accessor" should have a double "s", as in NG_VALUE_ACCESSOR.

Caused me some confusion when I tried to set propValueAccessor and it didn't work! Thanks for providing the otherwise very helpful package. 👍

Add angular 7 support

[email protected]" has incorrect peer dependency "@angular/core@^6.0.0".

Count characters and add a span around characters over limit

Hey @KostyaTretyak this is seriously awesome work you've done here. I was hoping to ask you a question about how I might proceed with counting and displaying the characters entered and also adding a <span> around the characters over the limit to style them.

Would you have any advice on that?

Error after update angular

Hi, after angular update, the plugin throw exception and isn't build,

Check this:

 ERROR in ./node_modules/ng-contenteditable/src/index.ts
 Module build failed: Error: D:\Usuario\Documentos\git\alumni-app\alumniApp\node_modules\ng-contenteditable\src\index.ts is missing from the TypeScript compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.
 The missing file seems to be part of a third party library. TS files in published libraries are often a sign of a badly packaged library. Please open an issue in the library repository to alert its author and ask them to package the library using the Angular Package Format (https://goo.gl/jB3GVv).
     at AngularCompilerPlugin.getCompiledFile (D:\Usuario\Documentos\git\alumni-app\alumniApp\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:709:23)
     at plugin.done.then (D:\Usuario\Documentos\git\alumni-app\alumniApp\node_modules\@ngtools\webpack\src\loader.js:41:31)
    at process._tickCallback (internal/process/next_tick.js:68:7)

But the file is in the correct location

I'm not sure why is show this error :/

Best regards.

Warning messages when using with Angular 6.1.3 and RxJs 6.2.2

Hi there, thanks for making this very useful module.

There are some warning messages showing up when we use with @angular/core@^6.1.3 and rxjs@^6.2.2.

npm WARN [email protected] requires a peer of @angular/core@^4.0.0but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of rxjs@^5.1.0 but noneis installed. You must install peer dependencies yourself.

Error: Please add a @Pipe/@Directive/@Component annotation

Hi,

My name is Rafael. Need help with my Angular 4 application.

ng-contenteditable is working just fine when I am running my app using ng serve but when I try to run ng build --prod, I get this error Error: Please add a @Pipe/@Directive/@Component annotation

What am I doing wrong?

Here is the complete error from my terminal:

ERROR in Error: Unexpected value 'ContenteditableDirective in /home/rafael/node/c/node_modules/ng-contenteditable/dist/index.d.ts' declared by the module 'AppModule in /home/rafael/node/c/src/app/app.module.ts'. Please add a @Pipe/@Directive/@component annotation.
at syntaxError (/home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:1729:34)
at /home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:15630:40
at Array.forEach ()
at CompileMetadataResolver.getNgModuleMetadata (/home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:15612:54)
at addNgModule (/home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:24408:58)
at /home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:24419:14
at Array.forEach ()
at _createNgModules (/home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:24418:26)
at analyzeNgModules (/home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:24293:14)
at analyzeAndValidateNgModules (/home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:24303:35)
at AotCompiler.analyzeModulesAsync (/home/rafael/node/c/node_modules/@angular/compiler/bundles/compiler.umd.js:23937:46)
at CodeGenerator.codegen (/home/rafael/node/c/node_modules/@angular/compiler-cli/src/codegen.js:32:14)
at Function.NgTools_InternalApi_NG_2.codeGen (/home/rafael/node/c/node_modules/@angular/compiler-cli/src/ngtools_api.js:73:30)
at _donePromise.Promise.resolve.then (/home/rafael/node/c/node_modules/@ngtools/webpack/src/plugin.js:386:44)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

Getting an error when using this - angular 5

Just trying this out and getting this error - using the latest Angular 5 / CLI:

ERROR in Error: Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 404:52 in the original .ts file), resolving symbol Directive in /Users/bostondevin/Desktop/mgx/node_modules/ng-contenteditable/node_modules/@angular/core/core.d.ts, resolving symbol ContenteditableDirective in /Users/bostondevin/Desktop/mgx/node_modules/ng-contenteditable/src/index.ts, resolving symbol ContenteditableDirective in /Users/bostondevin/Desktop/mgx/node_modules/ng-contenteditable/src/index.ts

I think it's related to using the angular CLI - angular/angular-cli#3707