@nexusgeographics/slideout-stack

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.