Modal

A modal is a dialog box/popup window that is displayed on top of the current page.

Example

Click the button below to open a modal.

Modal Example
modal-example.html 
<ng0-modal
    [open]="_showCases.basic.show()"
    (backdropClick)="_showCases.basic.show.set(false)"
    (closeRequest)="_showCases.basic.show.set(false)">
    <div class="modal-body">
        <p>
            This is a simple modal. <br />
            It will be closed when user clicks backdrop or presses ESC.
        </p>
    </div>
</ng0-modal>

<button class="btn btn-secondary me-2" (click)="_showCases.basic.show.set(true)">Open Modal</button>
modal-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Close behavior

When a modal is open and user tries to close it by clicking the backdrop or pressing ESC, the modal will emit a closeRequest event with the reason of the close attempt. You can listen to this event and decide whether to close the modal or not based on the reason.

Close behavior example
modal-example.html 
<ng0-modal
    [open]="_showCases.basic.show()"
    (backdropClick)="_showCases.basic.show.set(false)"
    (closeRequest)="_showCases.basic.show.set(false)">
    <div class="modal-body">
        <p>
            This is a simple modal. <br />
            It will be closed when user clicks backdrop or presses ESC.
        </p>
    </div>
</ng0-modal>

<button class="btn btn-secondary me-2" (click)="_showCases.basic.show.set(true)">Open Modal</button>
modal-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Static backdrop

With a static backdrop, the modal will not close when clicking outside of it or pressing ESC. Instead, it will trigger a "shake" animation to indicate that the user needs to interact with the modal itself. Click the button below to try it.
To make a modal with static backdrop, ignore the backdrop closeRequest event and close it manually.

Static backdrop example
static-example.component.html 
<ng0-dropdown>
    Primary
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
static-example.component.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Headers and footers

Modals can have optional header and footer sections. The header usually contains the title and a close button, while the footer typically includes action buttons like "Save" or "Cancel".

Headers and footers example
header-footer-example.html 
<ng0-dropdown>
    Primary
    <ng0-dropdown-menu>
        <ng0-dropdown-item (click)="thankYou()">Action</ng0-dropdown-item>
        <ng0-dropdown-divider />
        <ng0-dropdown-item toggleCss="text-danger">Another action</ng0-dropdown-item>
        <ng0-dropdown-link link="/"> Home Page (link) </ng0-dropdown-link>
        <ng0-dropdown-link link="/" target="_blank">
            Home Page (link, target: _blank)
        </ng0-dropdown-link>
        <ng0-dropdown-divider />
        <ng0-dropdown-link link="/" [active]="['fw-bold', 'text-info']">
            Active route with custom css class (link)
        </ng0-dropdown-link>
    </ng0-dropdown-menu>
</ng0-dropdown>
header-footer-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Size

Modals have 4 different sizes: sm, default, lg and xl.

size example
dropdown-example.html 
<ng0-modal
    [open]="_showCases.basic.show()"
    (backdropClick)="_showCases.basic.show.set(false)"
    (closeRequest)="_showCases.basic.show.set(false)">
    <div class="modal-body">
        <p>
            This is a simple modal. <br />
            It will be closed when user clicks backdrop or presses ESC.
        </p>
    </div>
</ng0-modal>

<button class="btn btn-secondary me-2" (click)="_showCases.basic.show.set(true)">Open Modal</button>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Alignment & Scrollable

Modals can be vertically centered and/or have a scrollable body.

Alignment & Scrolling example
dropdown-example.html 
<ng0-modal
    [open]="_showCases.basic.show()"
    (backdropClick)="_showCases.basic.show.set(false)"
    (closeRequest)="_showCases.basic.show.set(false)">
    <div class="modal-body">
        <p>
            This is a simple modal. <br />
            It will be closed when user clicks backdrop or presses ESC.
        </p>
    </div>
</ng0-modal>

<button class="btn btn-secondary me-2" (click)="_showCases.basic.show.set(true)">Open Modal</button>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

Full screen

Modals can be displayed in full screen mode on all or specific breakpoints.

Full screen example
dropdown-example.html 
<ng0-modal
    [open]="_showCases.basic.show()"
    (backdropClick)="_showCases.basic.show.set(false)"
    (closeRequest)="_showCases.basic.show.set(false)">
    <div class="modal-body">
        <p>
            This is a simple modal. <br />
            It will be closed when user clicks backdrop or presses ESC.
        </p>
    </div>
</ng0-modal>

<button class="btn btn-secondary me-2" (click)="_showCases.basic.show.set(true)">Open Modal</button>
dropdown-example.ts 
import { Component } from '@angular/core';
import { DropdownModule } from '@bootkit/ng0/components/dropdown';

@Component({
    selector: 'app-dropdown-example',
    templateUrl: './dropdown-example.component.html',
    standalone: true,
    imports: [DropdownModule]
})
export class DropdownExampleComponent {
}

On this page: