npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

ngx-ace-wrapper-lazy

v17.0.1

Published

Angular wrapper library for Ace

Downloads

95

Readme

Angular Ace Wrapper

This is an Angular wrapper library for the Ace. To use this library you should get familiar with the Ace documentation as well since this documentation only explains details specific to this wrapper.

Quick Links

Example application | StackBlitz example | Ace documentation

Building the library

npm install
npm run build

Running the example

npm install
npm run start

Installing and usage

npm install ngx-ace-wrapper --save
Load the module for your app (with global configuration):

Providing the global configuration is optional and when used you should only provide the configuration in your root module.

import { AceModule } from 'ngx-ace-wrapper';
import { ACE_CONFIG } from 'ngx-ace-wrapper';
import { AceConfigInterface } from 'ngx-ace-wrapper';

const DEFAULT_ACE_CONFIG: AceConfigInterface = {
};

@NgModule({
  ...
  imports: [
    ...
    AceModule
  ],
  providers: [
    {
      provide: ACE_CONFIG,
      useValue: DEFAULT_ACE_CONFIG
    }
  ]
})
Use it in your HTML template (with custom configuration):

This library provides two ways to create a Ace element, component for simple use cases and directive for more custom use cases.

COMPONENT USAGE

Simply replace the element that would ordinarily be passed to Ace with the ace component.

You also need to import brace and the used mode(s) and theme(s):

import 'brace';
import 'brace/mode/text';
import 'brace/theme/github';
<ace [config]="config" [mode]="'text'" [theme]="'github'" [(value)]="value"></ace>
[config]                     // Custom config to override the global defaults.

[mode]                       // Mode for the editor (import mode manually!).
[theme]                      // Theme for the editor (import theme manually!).
[value]                      // Input value of the ace editor content (text).
[disabled]                   // Disables all functionality (focus & editing).

[useAceClass]                // Use ace class (use provided default styles).

(valueChange)                // Event handler for the input value change event.

DIRECTIVE USAGE

You need to always import brace and the used mode(s) and theme(s):

import 'brace';
import 'brace/mode/text';
import 'brace/theme/github';

Ace directive can be used in correctly structured div element with optional custom configuration:

<div class="ace" [ace]="config">text</div>
[ace]                        // Custom config to override the global defaults.

[disabled]                   // Disables all functionality (focus & editing).
Available configuration options (custom / global configuration):
mode                         // Mode for the editor (import mode manually!).
theme                        // Theme for the editor (import theme manually!).

wrap                         // Sets text wrapping to be enabled or disabled.
tabSize                      // Size in spaces of the soft tabs (Default: 4).

showPrintMargin              // Sets showing of the print margin (Default: false).
printMarginColumn            // Sets the column where the print margin should be.

For more detailed documentation with all the supported config options see the Ace documentation.

Available control / helper functions (provided by the directive):
ace()                        // Returns the Ace instance reference for full API access.

clear()                      // Clears the editor document and resets text selection.

getValue()                   // Returns the current text value of the editor document.

setValue(value, cursorPos?)  // Text value for the editor document. Cursor position:
                             // 0 = select all, -1 = document start, 1 = document end.

Above functions can be accessed through the directive reference (available as directiveRef in the component).