New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

angular-contenteditable-component

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

angular-contenteditable-component

An Angular 1.5 component for editable elements

1.0.1
latest
npm
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

Angular Content Editable Component

Simple Angular 1.5 component making wrapped text elements editable.

Features:

  • Event handlers for text change and apply
  • Toggle editable element programmatically
  • Max length validation
  • Keyboard support for ENTER & ESC by applying and dismissing changes respectively

How to use it

  • Installation
$ npm install --save angular-contenteditable-component
  • Module Load

app.js

import angular from 'angular';
import ContentEditable from 'angular-contenteditable-component';
...
angular.module('app', [ContentEditable]);

index.html

...
<content-editable>
  Text Here is Editable!
</content-editable>
...

Example

app.js

import angular from 'angular';
import ContentEditable from '../../index';

class AppController {
  constructor(){}
  $onInit(){
    this.text = 'This is a random text';
  }
  toggleFocus() {
    this.active = !this.active;
  }
  updateText(text) {
    console.log('Text updated:', text);
    this.text = text;
  }
  editApply(text){
    console.log('Text applied:', text);
    this.text = text;
    this.active = false;
  }
}

angular.module('app', [ContentEditable]);
angular.module('app')
    .controller('AppController', AppController);

index.html

...
<content-editable
  active="vm.active"
  on-change="vm.updateText(text)"
  on-apply="vm.editApply(text)"
  max-length="90">
  <section>{{vm.text}}</section>
</content-editable>
...

Keywords

angular

FAQs

Package last updated on 31 Mar 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts