A simplistic and customisable blade component for Angular

Downloads in past


260.3.45 years ago5 years agoMinified + gzip package size for ngx-blade in KB


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

Stackblitz Demo


Step 1: Install NPM package
npm i ngx-blade --save

Step 2: Import NgxBladeModule into in your module
import { NgxBladeModule } from 'ngx-blade';

    imports:      [ NgxBladeModule, .. ]

Step 3: Add the default theme to src/styles.scss file.
@import "~ngx-blade/default.scss";





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


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


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.


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 ngxBladeBody>
    <div class="custom">
      <h4> Lorem Ipsum </h4>
      <button type="button" (click)="blade.close()">Close blade</button>
    <!-- Not only normal html entities, but components can also be used -->
  <div ngxBladeFooter>
    Blade Footer

Theme customisation

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

// blade header

// blade body

// blade header action buttons (Minimize/Maximize, Close) 

// blade footer

For example, if you like to change the blade's header color, all you have to do is to assign ngxBladeHeaderBackground your preferred color before the default theme is imported.
$ngxBladeHeaderBackground: rgba(127, 0, 0, 1);   // <---
@import "~ngx-blade/default.scss";

Theme Customisation Demo