Configure buttons
You can display the popup without any buttons for a clean, minimal interface, use predefined buttons for standard actions, or customize it by adding your own buttons with tailored text, style, and functionality to meet your specific needs.
By default, the popup is displayed without any buttons for a clean, minimal look. If you want some standard actions you can use the following predefined buttons:
okfor confirmationcancelto dismiss the popupclosefor closing the popup without actionsetfor saving or applying changes
You can add custom buttons with tailored text, style, and functionality if you have more specific needs.
Demo
<mbsc-popup
[buttons]="[]"
><mbsc-popup
[buttons]="['ok', 'cancel']"
><mbsc-popup
[buttons]="[{
text: 'Custom',
handler: function () {
mobiscroll.toast({
message: 'Custom button clicked'
});
}
}]"
>Hi there!
This is the default with no buttons.
Hi again!
This is a popup with predefined buttons.
Hi again!
This is a popup with a custom button.
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MbscModule, MbscPopup, MbscPopupOptions, Notifications, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [Notifications],
standalone: true,
imports: [CommonModule, MbscModule],
})
export class AppComponent {
constructor(private notify: Notifications) {}
@ViewChild('popupNoBtn', { static: false }) popupNoBtn!: MbscPopup;
@ViewChild('popupPredefined', { static: false }) popupPredefined!: MbscPopup;
@ViewChild('popupCustom', { static: false }) popupCustom!: MbscPopup;
popupOptionsNoBtn: MbscPopupOptions = {
display: 'center',
};
popupOptionsPredefined: MbscPopupOptions = {
display: 'center',
buttons: ['ok', 'cancel'],
};
popupOptionsCustom: MbscPopupOptions = {
display: 'center',
buttons: [
{
text: 'Custom',
handler: () => {
this.notify.toast({
message: 'Custom button clicked',
});
},
},
],
};
openPopupNoBtn(): void {
this.popupNoBtn.open();
}
openPopupPredefined(): void {
this.popupPredefined.open();
}
openPopupCustom(): void {
this.popupCustom.open();
}
}
<mbsc-page>
<div class="mbsc-align-center">
<div class="mbsc-note">Customize popup buttons depending on your context.</div>
</div>
<div class="mbsc-form-group">
<div class="mbsc-button-group-block">
<mbsc-button (click)="openPopupNoBtn()">No Buttons</mbsc-button>
<mbsc-button (click)="openPopupPredefined()">Predefined buttons</mbsc-button>
<mbsc-button (click)="openPopupCustom()">Custom button</mbsc-button>
</div>
</div>
<mbsc-popup #popupNoBtn [options]="popupOptionsNoBtn">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi there!</h3>
<p class="md-text-center">This is the default with no buttons.</p>
</div>
</mbsc-popup>
<mbsc-popup #popupPredefined [options]="popupOptionsPredefined">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with predifined buttons.</p>
</div>
</mbsc-popup>
<mbsc-popup #popupCustom [options]="popupOptionsCustom">
<div class="mbsc-align-center mbsc-padding">
<h3 class="md-text-center">Hi again!</h3>
<p class="md-text-center">This is a popup with a custom button.</p>
</div>
</mbsc-popup>
</mbsc-page>
/* style */