SlideOutStack

A service that controls a stack of slideout elements.

Table of Contents

• Overview
• Installation
  • Package dependencies
  • Import styles
  • Injection
• API Reference
  • Methods
    • config(options: SlideOutStackOptions): void
    • push(params: SlideOutStackParams): SlideOutElement
    • pop(result?: SlideOutStackResult): void
  • Interfaces
    • SlideOutStackOptions
    • SlideOutStackParams
    • SlideOutElement
    • SlideOutStackResult
• Full example

Overview

The SlideOutStackController provides methods to manage a stack of slideout elements in an Angular application. Slideout elements are components that can be presented and dismissed with animations.

Installation

npm install @nexusgeographics/slideout-stack --save

Package dependencies

This package uses @angular/cdk as a dependency. Run this command to install @angular/cdk if you haven't already:

npm install @angular/cdk

Import styles

Add the styles in your angular.json file:

"styles": [
  "./node_modules/@nexusgeographics/slideout-stack/styles/styles.scss"
]

Injection

Inject SlideOutStackController into your component or service:

import { SlideOutStackController } from '@nexusgeographics/slideout-stack';

public constructor(private slideOutStackCtrl: SlideOutStackController) { }

API Reference

Methods

config(options: SlideOutStackOptions): void

Configures the global options for the slideouts. When a slideout is pushed without options, the global options will be used.

| Parameter | Type | Description | | -- | -- | -- | | options | SlideOutStackOptions | Default options for all the slideouts. |

Example:

this.slideOutStackCtrl.config({
  animationDuration: 800,
  backdropDismiss: true,
  backdropOpacity: 0.6,
  fromEdge: 'left',
  width: '75%'
});

push(params: SlideOutStackParams): SlideOutElement

Pushes and displays a new SlideOutElement to the stack.

• Custom data can be passed to the component with the params.properties parameter.
• The SlideOutElement will be presented according to the params.options passed.
• If an option is not passed, the global option configured with the config method will be used.
• If no global option is configured, the default option will be used.

Returns: SlideOutElement

| Parameter | Type | Description | | -- | -- | -- | | params | SlideOutStackParams | The parameters for the slideout. |

Example:

const slideOutEl: SlideOutElement = this.slideOutStackCtrl.push({
  component: MyComponent
});

slideOutEl.onDismissed.then(() => {
  console.log('MyComponent dismissed');
});

pop(result?: SlideOutStackResult): void

Pops the top SlideOutElement from the stack if exists. It will be dismissed according the params.options passed in the push method.

| Parameter | Type | Description | | -- | -- | -- | | result | SlideOutStackResult | (optional) Result returned by the slideout when popped. |

Example:

this.slideOutStackCtrl.pop({
  data: 'Custom output data',
  role: 'accept'
});

Interfaces

SlideOutStackOptions

| Property | Type | Default | Description | | -- | -- | -- | -- | | animationDuration | number | 400 | (optional) Duration of the animation in milliseconds. | | backdropDismiss | boolean | false | (optional) Indicates whether clicking on the backdrop should close the slideout. If set to true, it will return {role: 'backdrop'} as a SlideOutStackResult when backdrop is clicked. | | backdropOpacity | number | 0.3 | (optional) Opacity of the backdrop between 0 and 1. Note: backdrop color is black. | | fromEdge | type | right | (optional) The edge from which the slideout should appear. Possible values are left and right. | | width | string | 80% | (optional) Width of the top slideout. It can also be set in pixels (e.g. 250px). |

SlideOutStackParams

| Property | Type | Description | | -- | -- | -- | | component | ComponentType<any> | The component to be presented into the slideout. | | properties | {[key: string]: any} | (optional) Custom data to pass to the component. | | options | SlideOutStackOptions | (optional) Options for the slideout. |

SlideOutElement

| Property | Type | Description | | -- | -- | -- | | component | ComponentRef<any> | The component reference of the slideout. | | onDismissed | Promise<SlideOutStackResult> | Promise resolved when the slideout dismisses. Contains the result of the slideout. |

SlideOutStackResult

| Property | Type | Description | | -- | -- | -- | | data | any | (optional) Data returned by the slideout when popped. | | role | string | (optional) Role returned by the slideout when popped. |

Full example

app-example.component.ts

import { ComponentType } from '@angular/cdk/portal';
import { Component, OnInit } from '@angular/core';
import { SlideOutStackController } from '@nexusgeographics/slideout-stack';
import { MyComponent } from './my-component';

@Component({
  selector: 'app-example',
  template: `
    <h1>App example</h1>
    <button (click)="pushSlideOut()">Open slideout</button>
  `
})
export class ExampleComponent implements OnInit {

  public constructor(
    private slideOutStackCtrl: SlideOutStackController
  ) { }

  public ngOnInit(): void {
    // Configure some global options
    this.slideOutStackCtrl.config({
      animationDuration: 1500,
      backdropDismiss: true
    });
  }

  public pushSlideOut(): void {
    // Push a new slideout onto the stack
    this.slideOutStackCtrl.push({
      component: MyComponent,
      properties: {
        data: 'Custom input data'
      },
      options: {
        animationDuration: 500, // Overrides the global option
        backdropOpacity: 0.5,
        fromEdge: 'right',
        width: '70%'
      }
    }).onDismissed.then((result) => {
      // Occurs when the slideout has been popped
      if (result.role === 'accept') {
        console.log(result); // Outputs 'Custom output data'
      }
    });
  }
}

my-component.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    <h1>My component</h1>
    <button (click)="popSlideOut()">Close slideout</button>
  `
})
export class MyComponent implements OnInit {

  public data!: string;

  public constructor(
    private slideOutStackCtrl: SlideOutStackController
  ) { }

  public ngOnInit(): void {
    console.log(this.data); // Outputs 'Custom input data'
  }

  public popSlideOut() {
    // Pop the top slideout from the stack
    this.slideOutStackCtrl.pop({
      data: 'Custom output data',
      role: 'accept'
    });
  }
}

License

This library is licensed under the MIT License. See the LICENSE file for details.