Foundations
Zoneless Angular
Use signals and explicit events to keep screen state reactive without Zone.js.
How a screen updates
The library works without Zone.js. Angular tracks signals read by templates; changing those signals notifies Angular that a view needs updating. Bound template listeners and other Angular notification APIs also participate. Use writable signals for values and computed for derived state instead of maintaining duplicate mutable flags.
Keep the Angular Native template’s startup configuration. Neural Native does not require adding Zone.js or a separate initialization provider. Angular 22 supplies the default component change-detection behavior, so these examples do not declare a redundant changeDetection setting.
State and a derived label
Place the following component inside the root neu-theme of your application.
import { Component, computed, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuButtonComponent } from '@neural-ui/native/button';
@Component({
selector: 'app-counter',
imports: [Text, View, NeuButtonComponent],
template: `
<view class="content">
<text class="label">{{ summary() }}</text>
<neu-button label="Add item" (pressed)="addItem()" />
</view>
`,
styles: `
.content { padding: 24px; gap: 16px; }
.label { color: var(--neu-text); }
`,
})
export class CounterComponent {
readonly count = signal(0);
readonly summary = computed(() => 'Items: ' + this.count());
addItem(): void {
this.count.update(value => value + 1);
}
}Each press updates the count signal. The derived summary value recalculates, and the template reads summary(). No timer, manual view refresh or synchronization effect is needed.
External callbacks and native text
When a device or application service returns data asynchronously, write the result into a signal consumed by the template. A plain object property assignment by itself is not a reliable update notification. Clean up subscriptions and listeners when their owning screen or service is destroyed.
Native text-event synchronization is handled internally by the library. Do not add ApplicationRef.tick() to your field handlers to compensate for it. Keep normal signal or FormField bindings and test your application’s actual keyboard behavior, including autocorrection and selection.