CoralUI Angular Directives


Why is this deprecated?

AngularJS is effectively dead, and it is better to use a modern JavaScript framework. CoralUI 2 is also no replaced by CoralUI 3.


This feature is primarily intended for use within ACS AEM Commons itself, but may be valuable for other users.

This Client Library includes a variety of AngularJS directives useful when building user interfaces based on CoralUI 2. Its primary function is to simplify the markup required, as seen in the examples below.

This feature is not intended to be used while building Granite UI-based user interfaces.

General Usage

  1. Include the client library category acs-commons.coralui.angularjs as a dependency to your client library.
  2. In your AngularJS module initialization, include acsCoral as a dependency.



Generates the appropriate markup for a CoralUI alert


    <div acs-coral-alert data-alert-type="notice" data-alert-size="large" data-alert-title="Workflow Removal Executing">
        Please be patient as workflow removal runs. The removal status below will update removal progress.

The alert message can be provided either as the body of the <div> element or as the data-alert-message attribute.


Generates the appropriate heading class attribute based on the element name.


<h1 acs-coral-heading>Some Heading</h1>


Adds the appropriate list and list item class attributes.


<ul acs-coral-list>
    <li>First Item</li>
    <li>Second Item</li>


Creates the necessary markup for a CoralUI checkbox


<label acs-coral-checkbox>
    <input type="checkbox" ng-model="app.paintConnections">
    <span>Paint Connections</span>
Please report any issues with the Feature or documentation on the ACS AEM Commons GitHub Issue tracker.