Guides on AngularCSS

AngularTS Ownership

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS extends AngularTS; it does not replace framework behavior. This rule keeps components predictable and prevents two state systems from disagreeing.

AngularTS owns application state

Use AngularTS for values, commands, collections, and conditional rendering:

<label for="volume">Volume</label>
<input id="volume" type="range" min="0" max="100" ng-model="volume" />
<output>{{ volume }}</output>

ng-model owns the value while the browser owns the range control. No AngularCSS directive is needed. Use ng-range-slider on a parent only when two or more native range inputs must share one visual track.

Composition

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS components expose HTML parts rather than private templates. Compose them when a workflow needs behavior from more than one primitive.

Form field

Combine field, label, input, description, and AngularTS validation:

<div class="field">
 <label for="email">Email</label>
 <input id="email" name="email" ng-model="profile.email" required />
 <p>Used for account notices.</p>
 <p ng-if="profileForm.email.invalid" class="field-error">
 Enter a valid email.
 </p>
</div>

The native input and AngularTS form controller own the value and validity. The field styles the authored label, helper, and error text around the control.

Accessibility

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS supplies component mechanics, but accessibility depends on the final authored HTML. Every component page documents what the directive generates and what the application must provide.

Start with semantic HTML

Use native elements before adding roles. A button already supports keyboard activation, a label connects to a form control, and a nav exposes a navigation landmark.

Use role only for composite patterns without a suitable native element, such as tabs, menus, and custom listboxes.

Testing

Mon, 01 Jan 0001 00:00:00 +0000

AngularCSS tests the HTML contract in Chromium with Playwright and validates source, public entrypoints, documentation inventory, AngularTS overlap, and forbidden ports with static checks.

Static checks

npm run check

This command verifies TypeScript, canonical component and element entrypoints, generated declarations, documentation completeness, component test inventory, AngularTS directive ownership, CSS isolation, and test ports.

Component tests

PLAYWRIGHT_PORT=4101 npm run test:components -- --reporter=dot

Use an available port other than 3000 or 4000. The default is 4100; set PLAYWRIGHT_PORT when another local service already owns it.

Support

Mon, 01 Jan 0001 00:00:00 +0000

Use GitHub Discussions for integration, HTML composition, and customization questions.

Use the issue tracker for reproducible AngularCSS defects and focused feature proposals. Include:

A reduced semantic HTML example.
AngularCSS and AngularTS versions.
Browser and operating system.
Expected and observed behavior.
Keyboard or assistive-technology details when relevant.

Report vulnerabilities through the repository’s private GitHub security advisory flow. Do not place security-sensitive details in a public issue.

The compatibility and upgrades page describes supported environments and the latest-version verification command.

Contributing

Mon, 01 Jan 0001 00:00:00 +0000

Read the repository contribution guide before opening a pull request. It defines the HTML, AngularTS, CSS, and AngularCSS ownership order, local setup, generated documentation workflow, and public API review process.

For shared presentation changes, update the DTCG 2025.10 source rather than editing generated token CSS. For catalog changes, keep root classes minimal and prefer semantic descendants and native attributes. Browser tests must exercise the built standalone example.

The required local sequence is: