NgxBlade

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

Stackblitz Demo

Installation

Step 1: Install NPM package

 
npm i ngx-blade --save
 

Step 2: Import NgxBladeModule into in your module

 
import { NgxBladeModule } from 'ngx-blade';
 
@NgModule({
    //..
    imports:      [ NgxBladeModule, .. ]
})
 

Step 3: Add the default theme to src/styles.scss file.

 
@import "~ngx-blade/default.scss";
 

---

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
 

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.

/src/styles.scss

 
$ngxBladeHeaderBackground: rgba(127, 0, 0, 1);   // <---
@import "~ngx-blade/default.scss";
 

Theme Customisation Demo