Popover

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.

A little context goes a long way

Open concise help next to a related preference, dismiss it and continue with the setting. The example makes no download or synchronization claim.

View and copy the complete example

basic.component.ts

import { Component, signal } from '@angular/core';
import { NeuSwitchComponent } from '@neural-ui/native/switch';
import { NeuPopoverComponent } from '@neural-ui/native/popover';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuSwitchComponent, NeuPopoverComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="product-scroll" keyboardShouldPersistTaps="handled" [showsVerticalScrollIndicator]="true"><view class="product-stack"><view class="product-section"><text class="product-title" accessibilityRole="header">A little context goes a long way</text><text class="product-caption">Help that stays close to the decision</text></view>
    <view class="product-surface"><text class="product-heading">Keep project copies offline</text><neu-switch label="Offline copies" [(checked)]="offline" />
    <neu-popover label="How offline copies work" title="Available when you need them" [(open)]="open"><view class="product-section"><text>An app can keep selected documents on the device and sync edits when a connection returns.</text><text class="product-caption">This example only changes a preference; it does not download documents.</text></view></neu-popover>
    <text class="product-caption">{{ offline() ? 'Offline preference enabled' : 'Offline preference paused' }}</text></view></view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

:host { flex: 1; flex-shrink: 1; min-height: 0; }
.product-scroll { flex: 1; flex-shrink: 1; height: 0px; min-height: 0; }
.product-stack { gap: 24px; padding-bottom: 20px; }
.product-section { gap: 12px; }
.product-row { flex-direction: row; align-items: center; gap: 12px; }
.product-copy { flex: 1; min-width: 0; gap: 4px; }
.product-title { color: var(--neu-text, #172033); font-size: 24px; line-height: 30px; font-weight: 600; }
.product-heading { color: var(--neu-text, #172033); font-size: 17px; line-height: 23px; font-weight: 600; }
.product-caption { color: var(--neu-muted, #596477); font-size: 14px; line-height: 20px; }
.product-actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
.product-surface { gap: 16px; padding: 16px; border-radius: 16px; background-color: var(--neu-surface, #ffffff); border-width: 1px; border-color: var(--neu-border, #a5afbf); }

  `,
})
export class ExampleComponent {
  readonly open = signal(false);
  readonly offline = signal(false);
}

Unavailable information

A disabled trigger cannot open the billing information.

View and copy the complete example

unavailable-information.component.ts

import { Component } from '@angular/core';
import { NeuPopoverComponent } from '@neural-ui/native/popover';
import { View, Text, ScrollView } from '@ng-native/components';

@Component({
  selector: 'app-example',
  imports: [NeuPopoverComponent, View, Text, ScrollView],
  template: `
    <scroll-view class="usage-scroll" keyboardShouldPersistTaps="handled"><view class="usage-stack">
    <neu-popover label="Billing information" title="Billing" [disabled]="true"><text>Billing is managed by your organization.</text></neu-popover>
    </view></scroll-view>
  `,
  styles: `
.actions { gap: 12px; align-items: flex-start; } text { color: var(--neu-text, #172033); font-size: 16px; }

.usage-scroll { flex: 1; }
.usage-stack { gap: 20px; padding-bottom: 20px; }
.usage-section { gap: 12px; }
.usage-heading { color: var(--neu-text, #172033); font-size: 16px; font-weight: 600; }
.usage-caption { color: var(--neu-muted, #64748b); font-size: 14px; }
.usage-row { flex-direction: row; flex-wrap: wrap; gap: 12px; align-items: center; }
.usage-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; }


  `,
})
export class ExampleComponent {

}

Interactive playground

Change the settings and try the result.

Device captures shown in English.

Popover · android · native capture — **Android**Native screenshot

Popover · ios · native capture — **iOS**Native screenshot

API reference

Inputs

Name	Type	Default	Binding	Description
label	string	Required	Input	Human-readable name for the control, action or group.
title	string	''	Input	Heading for the surface, section or presentation.
closeLabel	string	'Close information'	Input	Text or accessible name used for close. It does not perform the action by itself.
dismissLabel	string	'Dismiss information'	Input	Accessible name of the outside action that dismisses the information popup without activating its content.
disabled	boolean	false	Input	Disables user interaction. Values can still be supplied by the application.

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.

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);

Import