Confirm Dialog | Neural Native

Import

component.ts

import { NeuConfirmDialogComponent } from '@neural-ui/native/confirm-dialog';

Examples

Import ExampleComponent into its parent and place <app-example /> inside your application’s root neu-theme. The preview supplies the device frame and safe areas; use the root setup from Installation in your app.

Basic

Request deletion of the project, then choose whether to proceed or keep it. The example records the decision; your application performs the actual deletion.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuButtonComponent } from '@neural-ui/native/button';
import { NeuConfirmDialogComponent } from '@neural-ui/native/confirm-dialog';
import { View, Text } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuButtonComponent, NeuConfirmDialogComponent, View, Text],
  template: `
    <view class="confirmation-example">
      <neu-button label="Delete project" size="sm" variant="outline" tone="danger" (pressed)="open.set(true)" />
      <text accessibilityLiveRegion="polite">{{ deleted() ? 'Example project deleted' : 'Project is still available' }}</text>
    </view>
    <neu-confirm-dialog title="Delete Mobile launch?" message="This removes the project from your workspace. This action cannot be undone." confirmLabel="Delete" cancelLabel="Cancel" intent="danger" [showCloseButton]="true" [(open)]="open" (confirmed)="deleteProject()" />
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }
.confirmation-example { gap: 12px; }
  `,
})
export class ExampleComponent {
  readonly open = signal(false);
  readonly deleted = signal(false);
  deleteProject(): void {
    this.deleted.set(true);
  }
}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Confirm Dialog · android · native capture — **Android**Native screenshot

Confirm Dialog · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
title	string	Required	Input	Heading for the surface, section or presentation.
message	string	Required	Input	Message shown to explain a status, notification or decision.
confirmLabel	string	'Confirm'	Input	Text or accessible name used for confirm. It does not perform the action by itself.
cancelLabel	string	'Cancel'	Input	Text or accessible name used for cancel. It does not perform the action by itself.
intent	"danger" \| "default"	'default'	Input	Use danger for a destructive confirmation. It changes the primary action color, never the application action itself.
busy	boolean	false	Input	Keeps a confirmation in progress and disables its actions while your application completes the task.
showCloseButton	boolean	true	Input	Shows an X at the top right. Closing through it emits cancelled and updates open. The X is hidden while busy prevents dismissal. Enabled by default.
closeLabel	string	'Close'	Input	Accessible name of the header X, independent of cancelLabel. Defaults to Close; customize it for the app language.
closeOnConfirm	boolean	true	Input	Closes the dialog and updates open before emitting confirmed. Enabled by default. Set false for an asynchronous operation: bind busy while it runs and close open only after success.

Models

Name	Type	Default	Binding	Description
open	boolean	false	Model · two-way	Whether the presentation or message is requested to be open. Bind a writable signal with [(open)].

Outputs

Name	Payload	When it emits
openChange	boolean	Emits the updated open value. [(open)] binds this output together with its model input.
confirmed	void	Requests confirmation. Perform the actual operation in your application handler.
cancelled	void	Reports cancellation of the current editing or confirmation task.
opened	void	Reports that the native presentation has opened.
dismissed	void	Reports completion of native dismissal.

Model state

Bind the signal with [(modelName)] without calling it. Use modelName() to read its value.

model-fields.ts

import { signal } from '@angular/core';

// Fields inside your component class
readonly open = signal<boolean>(false);