Modal - Angular Native

<modal> presents content over everything else, as ModalHostView.

@if (showSettings()) {
<modal (requestClose)="showSettings.set(false)">
  <text>Settings</text>
</modal>
}

Showing and hiding

[visible] (default true) shows and hides a modal that stays in the template:

<modal [visible]="showSettings()" (requestClose)="showSettings.set(false)">
  <text>Settings</text>
</modal>

While visible is false the native host is not in the tree at all, as React Native's own Modal renders nothing while hidden, so the screen underneath takes touches as usual. On iOS a modal that was showing leaves once its dismissal has finished animating, which is also when (dismiss) fires; on Android it leaves straight away. @if does the same for a modal whose content should not exist while hidden, and destroys that content with it.

Transparency

transparent (default false) shows through to the screen behind the modal, and the container gets no backdrop; backdropColor sets the container's background otherwise, defaulting to white. On iOS, a transparent modal also needs presentationStyle="overFullScreen" to actually look transparent - setting a different presentation style while transparent logs a warning rather than failing silently. presentationStyle otherwise chooses 'fullScreen', 'pageSheet' or 'formSheet' on iOS.

Other props

animationType ('none', 'slide', 'fade') controls how the modal appears and leaves. supportedOrientations lists which orientations the modal may rotate to on iOS (defaults to portrait), and allowSwipeDismissal lets a downward swipe dismiss it there, reported through (requestClose). On Android, statusBarTranslucent draws under the status bar, navigationBarTranslucent draws under the navigation bar too (and needs statusBarTranslucent to have any effect), and hardwareAccelerated gives the modal's window a hardware-accelerated surface.

Events

(requestClose) fires for the Android back button or an iOS swipe-to-dismiss. (show), (dismiss) and (orientationChange) are the others.

modalcomponent@ng-native/components

import { Modal } from '@ng-native/components';and add Modal to the component's imports

Content presented over everything else. Commits as ModalHostView .

Inputs

visible

boolean = true

Whether the modal is showing. Defaults to true, as in RN. While false the engine leaves the native host out of the commit, as RN's Modal returns null when hidden, because the host covers the screen and takes every touch whether or not it presents; on iOS a modal that was showing stays until native reports its dismissal.

transparent

boolean = false

See through to the screen behind; the container gets no backdrop.

backdropColor

string

The container's background when not transparent. Defaults to white.

animationType

'none' | 'slide' | 'fade'

How the modal appears and leaves. Defaults to none .

presentationStyle

ModalPresentationStyle

iOS: full screen, a sheet, or over the current content. overFullScreen if transparent.

supportedOrientations

readonly ModalOrientation[]

iOS: which orientations the modal may rotate to. Defaults to portrait.

allowSwipeDismissal

unknown

iOS: let a downward swipe dismiss the modal, reported through (requestClose) .

statusBarTranslucent

unknown

Android: draw under the status bar.

navigationBarTranslucent

unknown

Android: draw under the navigation bar. Needs statusBarTranslucent too.

hardwareAccelerated

unknown

Android: give the modal's window a hardware-accelerated surface.