Overlays and focus

Choose the presentation for the task

These are library components, not a replacement for application routes or the framework’s router presentation APIs. Keep open state in the screen and avoid opening several presentations from the same rapid tap sequence.

An editor that can cancel safely

Create src/app/edit-profile.component.ts inside the existing theme. The editor works on a draft: saving commits it, while cancellation and other dismissal paths discard it. Reopening starts from the saved data.

import { Component, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuModalComponent } from '@neural-ui/native/modal';
import { NeuInputComponent } from '@neural-ui/native/input';

@Component({
  selector: 'app-edit-profile',
  imports: [Text, View, NeuButtonComponent, NeuModalComponent, NeuInputComponent],
  template: `
    <neu-button label="Edit profile" (pressed)="beginEdit()" />
    <text class="feedback">{{ savedName() }}</text>
    <neu-modal title="Edit profile" [(open)]="editing" closeLabel="Cancel editing">
      <view class="content">
        <neu-input label="Full name" [(value)]="draft" />
        <neu-button label="Save changes" [disabled]="!draft().trim()" (pressed)="save()" />
        <neu-button label="Cancel" variant="text" (pressed)="editing.set(false)" />
      </view>
    </neu-modal>
  `,
  styles: `
    .content { gap: 16px; }
    .feedback { color: var(--neu-text); }
  `,
})
export class EditProfileComponent {
  readonly editing = signal(false);
  readonly savedName = signal('Ada Lovelace');
  readonly draft = signal('');

  beginEdit(): void {
    this.draft.set(this.savedName());
    this.editing.set(true);
  }

  save(): void {
    const name = this.draft().trim();
    if (!name) return;
    this.savedName.set(name);
    this.editing.set(false);
  }
}

Open state, events and focus

[(open)] connects the requested visibility to a writable signal. Modal exposes opened and dismissed for presentation lifecycle, and closed identifies a close request from native dismissal, an action or the backdrop. Check the individual component API before sharing handlers: BottomSheet and ConfirmDialog do not have the same closed output contract.

Keep the action that opened the overlay available after it closes. Coordinate keyboard and accessibility focus with presentation and dismissal: choose the initial control and return destination in your application. Verify the complete interaction with the keyboard open, native Back on Android and assistive technology.

With dismissible=false, Modal and BottomSheet restrict user dismissal, while the app can still close them through open. Provide an explicit way out. For asynchronous confirmation, use busy on ConfirmDialog and prevent duplicate requests in the handler.