Confirmation
This directive can be attached to any <ts-button> to enable a confirmation step before triggering
the button's action.
Basic flow:
- The user clicks the button
- A pop-up appears asking user to cancel or confirm
- If the user clicks 'confirm', the original
ts-buttonevent is emitted - If the user clicks 'cancel' the pop-up is closed and no button event is emitted
Table of Contents
Installation
Use the ng add command to quickly install all the needed dependencies:
ng add @terminus/ui-confirmationCSS imports
In your top-level stylesheet, add these imports:
@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';CSS resources
Load the needed font families by adding this link to the <head> of your application:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">Usage
Add the directive to any ts-button:
<ts-button
tsConfirmation
(clicked)="myContinueFn($event)"
>Click me!</ts-button>Cancelled event
This directive exposes a new event that can be used to determine when a user has chosen 'cancel' from the confirmation pop-up.
<ts-button
tsConfirmation
(cancelled)="myCancelEvent($event)"
>Click me!</ts-button>Text customization
Confirm button
Customizes the confirmation button text in the overlay. This defaults to Confirm.
<ts-button
tsConfirmation
confirmationButtonText="Custom Confirmation Button Text"
>Click Me!</ts-button>Cancel button
Customizes the text in the overlay of the cancel button; default is "Cancel".
<ts-button
tsConfirmation
cancelButtonText="Custom Cancel Button Text"
>Click Me!</ts-button>Explanation text
Optional text to appear inside of the overlay, generally to use as a warning, for example, "Are you sure you want to do this action?". No explanation text exists by default.
<ts-button
tsConfirmation
explanationText="This will permanently delete this record."
>Click Me!</ts-button>Position
The position of the panel is centered below the trigger by default. This position can be changed to any of the
TsConfirmationOverlayPositionTypes (above|below|before|after).
<ts-button
tsConfirmation
overlayPosition="before"
>Click Me!</ts-button>