NgxBlade2

A simplistic blade component for Angular with minimize/maximize and a close button.

Forked from ngx-blade

Stackblitz Demo

Compatibility

| ngx-bladex | Angular | | ---------- | ------- | | 18.2.0 | >=16.x.x| | 15.0.0 | 15.x.x | | 14.0.0 | 14.x.x | | 13.0.0 | 13.x.x | | 12.0.0 | 12.x.x | | 11.0.0 | 11.x.x | | 10.0.0 | 10.x.x | | 9.0.0 | 9.x.x |

Installation

Step 1: Install NPM package

npm i ngx-bladex --save

Step 2: Import NgxBladeModule into in your module

Skip this if you are using standalone components

import { NgxBladeModule } from 'ngx-bladex';

@NgModule({
    //..
    imports:      [ NgxBladeModule, .. ]
})

Step 2.1: To use standalone component Import NgxBladeComponent into in your component

Skip this if you are using Module approach

import { NgxBladeComponent } from 'ngx-bladex';

@Component({
    //..
    imports:      [ NgxBladeComponent, .. ]
})

NgxBladeComponent

Selector

<ngx-blade></ngx-blade>

Inputs

• width: number - Width of the blade in percentage relative to the browser window.
• config: BladeConfig - Blade configuration properties. See BladeConfig

Outputs

• onClose - Emitted when close button is clicked. if closeButton is set as false, this event will never be emitted.

BladeConfig

contains the following properties

export interface BladeConfig {
  closeButton: boolean; // default: true
  maximizeButton: boolean; // default: true
  isModal: boolean; // default: false
}

• closeButton: boolean - specify whether blade should contain a close button.
• maximizeButton: boolean - specify whether blade should contain the minimize/maxime button.
• isModal: boolean - specify if the blade should behave similar a modal dialog.

If a config is not provided as input, the default values will be used.

Directives

The following directives should be used within the <ngx-blade> element.

• ngxBladeHeader - Blade Header element
• ngxBladeBody - Blade body element
• ngxBladeFooter - Blade footer element

Sample Usage

<ngx-blade width="50" (onClose)="onBladeClose()" *ngIf="showBlade" #blade>
  <div ngxBladeHeader>Blade title</div>
  <div ngxBladeBody>
    <div class="custom">
      <h4>Lorem Ipsum</h4>
      <button type="button" (click)="blade.close()">Close blade</button>
    </div>
    <!-- Not only normal html entities, but components can also be used -->
    <my-component></my-component>
  </div>
  <div ngxBladeFooter>Blade Footer</div>
</ngx-blade>

Theme customisation

Since v0.3.0, ngx-blade supports theme customisation using SCSS variables. The following SCSS variables can be customised

// blade border
$ngxBladeBorderColor

// blade header
$ngxBladeHeaderBackground
$ngxBladeHeaderTextColor

// blade body
$ngxBladeBodyBackground
$ngxBladeBodyTextColor

// blade header action buttons (Minimize/Maximize, Close)
$ngxBladeActionButtonBackground
$ngxBladeCloseButtonHoverBackground

// blade footer
$ngxBladeFooterBackground
$ngxBladeFooterTextColor

Theme Customisation Demo